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内 容 简 介 
E， 为 了 适应 移动 设备 和 云端 服务 ，Web 前 端 涌现 出 很 多 新 框架 和 新 技术 ， 这 为 高 质 





量 的 软件 开发 带 来 了 前 所 未 有 的 挑战 。 本 书 详细 介绍 了 Web 前 端 开 发 与 测试 的 理论 ， 以 及 基于 


Jasmine、S' 


elenium 、Protractor 和 Jenkins 如 何 进行 全 生命 周期 的 测试 与 集成 。 全 书 共 分 四 个 部 分 。 


第 一 部 分 为 基础 篇 ， 总 览 了 前 端 开发 测试 中 的 挑战 与 测试 转型 ， 介 绍 了 测试 基础 环境 的 措 建 ， 第 二 
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部 分 为 集成 篇 ， 阑 述 了 基于 持续 集成 以 实现 更 快 、 更 可 靠 的 软件 交付 ， 展 示 了 如 何 通过 Jenkins 与 
TFS、VSTS 和 GitHub 的 集成 ， 实 现 Web 应 用 的 持续 测试 。 
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笔者 多 年 来 一 直 在 微软 公司 从 事 与 Web 开 发 相关 的 技术 工作 ， 帮 助 客 户 维护 和 处 理 各 
种 Web 应 用 的 突 发 事件 ， 期 间 走访 了 大 量 客户 ， 为 他 们 提供 解决 方案 或 指导 意见 。 我 们 深 
深 感受 到 近 些 年 来 Web 技 术 的 快速 发 展 对 Web 开 发 人 员 、 测 试 人 员 带 来 的 诸多 挑战 : 
@ Web 开 发 是 一 个 开放 的 、 不 断 演进 的 、 高 速 迭 代 的 领域 。 即 便 是 过 去 一 直 被 诉 病 
为 封闭 的 微软 公司 也 开始 拥抱 开源 世界 ， 提 供 .NET Core、TypeScript 等 多 项 开源 和 
跨 平台 技术 。 这 对 于 过 去 长 期 在 单一 厂商 平台 上 进行 项 目 开发 的 技术 人 员 而 言 ， 
就 更 需要 积极 主动 地 学 习 新 技术 ， 接 受 新 挑战 ， 以 适应 变化 ， 满 足 业 务 需求 。 
@ 基于 JavaScript 的 前 端 应 用 规模 越 来 越 大 ， 功 能 越 来 越 复杂 ， 前 端 测试 已 经 成 为 
保证 产品 质量 的 关键 因素 。 同 时 ， 由 于 Web 开 发 存在 测试 周期 短 、 更 新 频繁 的 特 
点 ， 传 统 测试 人 员 需 要 具备 一 定 的 开发 能 力 才 能 充分 利用 自动 化 测试 工具 来 提高 
测试 效率 。 
@ 随 着 敏捷 软件 开发 方法 和 DevOps 的 流行 ， 测 试 和 开发 环节 之 间 的 界限 逐渐 变 得 模 
糊 。 传 统 开发 人 员 需 要 了 解 一 定 的 测试 方法 并 具有 相应 的 思维 方式 ， 才 能 设计 出 
良好 的 测试 用 例 。 由 于 测试 和 开发 环节 的 融合 ， 无 论 是 开发 人 员 还 是 测试 人 员 都 
需要 不 断 提高 自身 的 能 力 和 价值 。 
本 书 是 笔者 在 开发 测试 领域 中 的 实践 与 经 验 的 总 结 ， 希 望 读者 通过 对 本 书 的 学 习 ， 能 
够 掌握 Web 前 端 测试 的 各 种 技巧 ， 提 升 自己 的 能 力 ， 迎 接 新 技术 的 挑战 。 


本 书 内 容 


全 书 共 分 四 个 部 分 ， 前 两 部 分 为 金 多 编写 ， 后 两 部 分 为 武 帅 编写 。 

@ 第 一 部 分 为 基础 篇 (第 1 一 2 章 ) ， 总 览 了 前 端 开发 测试 中 的 挑战 与 进行 测试 转型 
的 方法 ， 以 及 基于 Node.js 搭 建 测试 开发 基础 环境 的 步骤 。 

@ 第 二 部 分 为 单元 测试 篇 (第 3 一 7 章 ) ， 基 于 单元 测试 理论 深入 剖析 了 Jasmine 测 试 
框架 的 结构 与 各 种 使 用 范式 ， 内 容 履 盖 了 所 有 主流 单元 测试 的 技巧 。 然 后 ， 结 合 
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gulp、Karma 等 构建 、 执 行 工具 对 单元 测试 进行 自动 化 处 理 。 最 后 以 实战 的 形式 演 
示 了 AngularJS 单 元 测试 最 佳 实践 以 及 Istanbul 代 码 履 盖 率 的 应 用 等 内 容 。 

@ 第 三 部 分 为 自动 化 测试 篇 (第 8~14 章 ) ， 由 浅 入 深 地 介绍 了 Selenium 各 个 组 件 的 
功能 特点 和 WebDriver 在 自动 化 测试 中 的 使 用 技巧 。 进 而 基于 Protractor 深 入 介绍 了 
在 Node.js 环 境 下 ， 通 过 JavaScript 代 码 结合 WebDriver 进 行 自 动 化 测试 ， 并 全 面 覆 盖 
Chrome、Firefox、IE 和 Edge 等 主流 浏览 器 的 最 佳 实践 ， 内 容 包 括 页 面 对 象 模型 、 
性 能 测试 、 数 据 驱 动 测试 和 分 布 式 测试 等 。 

@ 第 四 部 分 为 集成 篇 〈 第 15 一 16 章 ) ， 阐 述 了 基于 持续 集成 技术 来 实现 更 快 、 更 可 
靠 的 软件 交付 方法 ， 比 较 了 当前 主流 CI 系统 的 特点 ， 展 示 了 通过 Jenkins 与 TFS、 
VSTS 和 GitHub 集 成 来 实现 Web 应 用 持续 测试 的 方法 。 


本 书 适合 所 有 Web 开 发 人 员 、 测 试 人 员 和 项 目 经 理 做 学 习 、 参 考 之 用 。 本 书 涉及 的 示 
例 代码 ， 读 者 可 从 网 址 https://github.com/FrontEndTesting/webtesting-book-demo 处 下 载 ， 供 
对 照 学 习 。 
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软件 的 本 质 是 靠 良好 的 质量 吸引 客户 。 近 些 年 ， 随 着 新 技术 新 模式 的 出 现 ， 企 业 在 交 
付 高 质量 软件 和 服务 方面 ， 面 临 着 越 来 越 大 的 压力 。 正 因为 如 此 ， 对 软件 产品 的 质量 控制 
已 成 为 企业 生存 和 发 展 的 核心 ， 几 乎 所 有 的 企业 ， 在 软件 开发 生命 周期 里 都 会 持续 投入 测 
试 力量 。 

同时 ，Web 开 发 技术 为 了 适应 移动 设备 和 云端 服务 的 应 用 趋势 ， 发 生 了 很 大 的 变化 和 
演进 ， 各 种 新 标准 、 新 框架 、 新 工具 、 新 理念 如 雨后春笋 般 涌 现 。 如 何在 测试 中 从 容 应 对 
各 个 框架 的 新 特性 ， 全 面 覆盖 各 个 主流 浏览 器 ， 为 Web 测 试 带 来 了 前 所 未 有 的 挑战 ， 也 迎 
来 了 测试 自动 化 转型 的 契机 。 

本 章 将 介绍 : 

@ Web 技 术 的 发 展 和 挑战 

@ 传统 开发 流程 的 局 限 性 

@ 传统 手工 测试 的 局 限 性 

@ 开发 模式 的 转型 


1.1 Web 技 术 的 发 展 和 挑战 


Web 应 用 通常 分 为 前 端 和 后 端 ， 前 端 主要 在 浏览 器 里 显示 和 采集 信息 ， 后 端 主要 处 理 
数据 和 业务 逻辑 。 传 统 的 Web 应 用 一 直 偏 重 后 端 开发 。 当 用 户 通过 浏览 器 访问 一 个 网 址 ， 
这 个 网 址 可 能 是 一 个 存储 在 服务 器 上 的 静态 HTML 文 件 ， 由 服务 器 读 取 后 直接 返回 。 更 
多 的 情况 是 这 个 网 址 对 应 的 是 一 个 模板 ， 服 务 器 在 用 户 请 求 时 根据 业务 逻辑 和 模板 动态 
拼接 成 HTML 格 式 的 字符 串 。Web 开 发 人 员 采 用 各 种 后 端 动态 页 面 技术 比如 CGI、PHP 
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和 ASP 等 生成 这 样 的 字符 串 。 换 句 话 说， 所 谓 的 “前 端 ” 是 由 后 端 服务 器 动态 输出 而 成 的 
HTML 网页。 

在 这 样 的 传统 Web 应 用 中 ， 前 端 只 是 充当 一 个 展示 层 ， 服 务 调 用 、 网 页 跳 转 流程 等 都 
需要 由 后 端 服 务 器 处 理 。 每 当 网 页 功能 有 所 变化 时 《即使 网 页 内 容 只 有 细微 变动 ) ， 浏 览 
器 都 需要 重新 发 起 一 个 HTTP 请 求 到 服务 器 ， 然 后 由 后 端 服务 器 重新 生成 整个 页 面 如 图 1-1 
所 示 。 这 种 方式 不 但 增加 服务 器 的 负担 ， 降 低 响 应 速度 ， 而 且 浏览 器 重复 下 载 整个 网 页 会 
浪费 网 络 带宽 ， 对 于 移动 应 用 很 不 经 济 。 








初始 请 求 











浏览 器 。 | Fon POST 服务 器 


站 和 | 
Reload 
图 1-1 传统 网 页 生命 周期 

而 在 现代 Web 应 用 中 ， 当 网 页 的 部 分 内 容 需 要 更 新 时 ， 运 行 在 浏览 器 内 的 JavaScript 代 
码 通常 会 向 服务 器 发 送 Ajax 请 求 ， 而 服务 器 端 只 需 输出 必要 的 数据 ， 不 需要 重新 构造 整个 
HIMIL 页面， 如 图 1-2 所 示 。Web 前 端 应 用 接收 到 来 自 服务 器 的 数据 后 ， 只 需 重 绘 界 面 上 需 
要 变化 的 部 分 。 这 种 方式 提高 了 应 用 的 响应 速度 ， 改 善 了 用 户 的 使 用 体验 。 同 时 ， 因 为 很 
多 用 户 交 互 的 处 理工 作 可 以 在 浏览 器 内 完成 ， 无 需 向 服务 器 发 送 HTTP 请 求 ， 服 务 器 和 浏 
览 器 之 间 交 换 的 数据 量 大 幅 减 少 ， 所 以 服务 器 负荷 降低 ， 响 应 速度 也 更 快 了 。Web 应 用 渐 
渐 开始 拥有 和 桌面 应 用 一 样 的 响应 速度 和 使 用 体验 。 






































初始 请 求 

















浏览 器 。 | Ajax 服务 器 


JSON 



































图 1-2 现代 单 页 应 用 ( SPA ) 生命 周期 
除了 网 页 内 容 的 更 新 ，Web 应 用 一 部 分 业务 逻辑 的 处 理 也 从 后 端 服务 器 慢 慢 移 到 前 
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端 ，Web 前 端 开发 变 得 越 来 越 重 要 。 而 这 一 切 都 离 不 开 JavaScript。 

JavaScript 是 1995 年 由 Netscape 工 程 师 Brendan Eich 花 了 10 天 的 时 间 创 造 出 来 的 ， 其 最 
初 目的 是 为 了 满足 用 户 浏览 网 页 时 产生 的 交互 需求 。 可 以 说 ，JavaScript 是 为 开发 Web 应 用 
而 诞生 的 。 

自 其 诞生 起 的 相当 长 一 段 时 间 内 ， 这 门 在 浏览 器 内 执行 一 些 简单 的 校 验 和 互动 的 脚 
本 语言 常 被 称 之 为 “玩具 语言 ”， 堪 称 世界 上 被 人 误解 最 深 的 编程 语言 "2。 在 简洁 的 外 表 
下 ，JavaScript 其 实 有 着 强大 的 语言 特性 。 它 是 一 种 面向 对 象 的 动态 语言 ， 包 含 类 型 、 运 
算 符 、 标 准 内 置 对 象 和 方法 。 其 语法 来 源 于 Java 和 C， 所 以 这 两 种 语言 的 许多 语法 特性 同 
样 适用 于 JavaScript。 

随 着 Web 应 用 的 普及 ，JavaScript 自 身 也 在 不 断 演 化 以 适应 更 复杂 的 编程 需求 ， 目 前 
JavaScript 已 经 成 为 Web 前 端的 实际 标准 ， 也 是 最 热门 的 编程 语言 之 一 。 各 种 JavaScript 前 端 
框架 ， 包 括 Ember、AngularJS、React 和 Vue 等 不 断 涌现 。 

正 因 为 基于 JavaScript 前 端 应 用 越 来 越 重要 ， 功 能 越 来 越 复杂 ， 对 前 端 开发 测试 带 来 
了 极 大 的 挑战 。 如 何 保证 Web 前 端 应 用 的 正确 性 和 可 靠 性 成 为 了 各 大 企业 关注 的 问题 。 
@ 在 市 场 需求 的 推动 下 ，Web 前 端 应 用 规模 不 断 扩 大 ， 一 个 应 用 可 能 有 成 千 上 万 行 
JavaScript 代 码 。 这 些 代码 用 于 执行 各 种 复杂 的 功能 ， 为 用 户 提供 不 同 的 交互 体 
验 。 为 了 确保 它们 能 实现 预期 的 功能 ， 因 此 Web 前 端 应 用 测试 的 工作 量 也 需要 相 
应 增加 。 
@ 相对 于 传统 的 桌面 应 用 ， 用 户 只 要 重新 刷新 浏览 器 就 可 以 获得 最 新 版 本 的 网 页 ， 
所 以 Web 前 端 应 用 具有 天 生 的 快速 迭代 特征 ， 可 以 频繁 地 更 新 和 发 布 。 而 激烈 的 
商业 竞争 也 使 得 Web 前 端 应 用 开发 周期 缩短 ， 对 应 的 测试 周期 也 非常 短 。 

@ 除了 JavaScript 代 码 ，Web 前 端 应 用 还 有 各 种 超 链接 、 表 单 以 及 图 片 等 信息 ， 需 要 

保证 在 不 同 的 操作 系统 和 浏览 器 上 可 以 正确 显示 网 页 的 内 容 。 





1.2 传统 开发 流程 的 局 限 性 


在 过 去 二 十 年 或 更 长 的 时 间 中 ， 传 统 的 、 非 敏捷 的 瀑布 式 软件 开发 模式 通常 依赖 于 一 


个”Douglas Crockford. JavaScript: The World's Most Misunderstood Programming Language[OL]. [2016]. 
http://javascript.crockford.com/javascript.html. 
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个 严格 的 模式 化 开发 流程 。 通 常 认为 瀑布 模型 ?是 Winston W. Royce 在 1970 年 提出 的 软件 开 
发 模型 (虽然 他 并 没有 使 用 瀑布 waterfall 这 个 单词 ) 。 这 种 方法 源 自 传统 工业 生产 ， 严 格 
遵循 预先 计划 的 需求 、 分 析 、 设 计 、 编 码 、 测 试 和 部 署 的 步骤 顺序 进行 ， 每 个 步骤 都 有 严 
格 分 工 ， 由 不 同 的 技术 人 员 分 别 执行 。 执 行 步骤 的 成 果 作为 衡量 进度 的 途径 ， 例 如 需求 规 
格 、 设 计 文档 、 测 试 计划 和 代码 审阅 等 。 但 随 着 各 种 新 兴 技 术 的 蓬勃 发 展 ， 特 别 是 在 产品 
快速 迭代 的 需求 背景 下 ， 这 种 传统 开发 流程 的 局 限 性 日 益 明 显 : 

1. 自由 度 低 ， 缺 乏 灵活 性 

传统 模式 在 项 目 早期 即 作出 承诺 ， 基 于 稳定 的 目标 进行 阶段 性 的 开发 ， 这 种 方式 自由 
度 低 ， 应 对 突 发 情况 时 缺乏 灵活 性 。 众 所 周知 ， 需 求 会 随 着 时 间 而 变化 ， 经 常 出 现 开发 人 
员 努 力 在 设计 前 完成 文档 ， 在 编写 代码 前 完成 设计 ， 最 后 却 因为 需求 有 变化 而 不 得 不 完 
全 推倒 重 来 的 情况 ， 不 仅 大 量 工作 被 浪费 ， 甚 至 导致 对 后 期 需求 的 变化 难以 应 变 ， 代 价 
高 昂 。 

2. 缺陷 发 现 晚 ， 无 法 及 时 反馈 

传统 流程 一 般 在 开发 阶段 接近 尾声 时 才 开 始 测试 。 虽 然 在 这 个 阶段 进行 测试 相对 容 
易 ， 但 是 一 些 在 早期 的 单元 测试 中 可 以 轻易 发 现 的 缺陷 可 能 要 到 最 后 阶段 才 会 发 现 ， 增 加 
了 被 遗漏 的 风险 。 

由 于 缺陷 发 现 得 很 晚 ， 如 果 要 解决 问题 ， 则 有 可 能 导致 错过 发 布 的 最 后 期 限 ， 再 加 上 
手工 测试 效率 低下 ， 任 何 一 次 代码 变更 或 缺陷 修复 对 产品 的 影响 都 无 法 迅速 反馈 给 开发 人 
员 。 随 着 发 现 的 缺陷 越 来 越 多 ， 开 发 人 员 只 会 对 变更 没有 信心 ， 失 去 持续 完善 的 动力 。 

3. 协同 合作 缺失 ， 容 易 引 起 团队 冲突 

传统 流程 中 每 个 步骤 都 有 严格 分 工 ， 不 同 阶段 的 技术 人 员 与 上 下 游 的 工种 往往 沟通 较 
少 ， 甚 至 对 产品 本 身 的 理解 也 存在 差异 。 例 如 ， 开 发 人 员 和 测试 人 员 在 思维 和 工作 方式 上 
的 不 同 ， 使 得 他 们 对 软件 需求 和 测试 场景 的 表述 发 生 歧义 ， 从 而 引起 双方 的 沟通 问题 。 而 
这 些 理 解 上 的 差异 如 果 直 到 测试 阶段 才 被 发 现 的 话 ， 则 实在 太 晚 ， 此 时 双方 的 冲突 与 指责 
对 解决 问题 没有 任何 帮助 。 

4. 产品 质量 无 法 保证 

传统 流程 中 常见 的 一 个 场景 是 在 项 目 后 期 将 要 交付 的 阶段 ， 技 术 人 员 仓 促 地 从 开发 
环境 构建 转 为 脚本 配置 ， 而 长 期 在 开发 环境 内 依靠 手工 管理 ， 构 建 脚本 的 时 候 就 可 能 会 
到 各 种 各 样 的 问题 ， 例 如 接口 没有 定义 、 配 置 文件 丢失 、 组 件 不 工作 等 。 为 了 解决 这 些 问 


@® Wikipedia. Waterfall model[OL]. [2016]. https://en.wikipedia.org/wiki/Waterfall model. 
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题 ， 技 术 人 员 不 得 不 把 主要 精力 放 在 软件 构建 上 ， 结 果 时 间 成 本 越 来 越 高 ， 产 品质 量 无 法 
保证 ， 甚 至 出 现 产品 无 法 按时 交付 的 情况 。 


1.3 ”传统 手工 测试 的 局 限 性 


软件 测试 是 在 规定 的 条 件 下 对 程序 进行 操作 ， 以 发 现 程序 中 的 错误 ， 衡 量 软件 质量 ， 
并 对 其 是 否 能 满足 设计 要 求 进行 评估 的 过 程 。 软 件 测试 的 目的 是 希望 以 最 小 的 代价 尽 可 能 
多 地 找 出 软件 中 潜在 的 错误 和 缺陷 。 

首先 ， 测 试 人 员 会 针对 开发 人 员 开 发 的 功能 写 出 测试 用 例 ， 例 如 表单 应 该 填 入 的 数 
据 ， 页 面 单 击 顺序 ， 以 及 最 后 页 面 期 待 的 显示 效果 。 然 后 ， 测 试 人 员 会 按照 用 例 一 步 步 进 
行 手工 检验 ， 如 果 发 现 页 面 行为 异常 ， 例 如 无 法 打开 页 面 或 生成 的 数据 不 正确 ， 则 会 在 企 
业 缺 陷 管理 系统 中 提交 缺陷 记录 ， 供 开发 人 员 进 行 修正 。 在 开发 过 程 中 ， 如 果 有 新 版 本 编 
译 出 来 ， 测 试 人 员 需 要 根据 测试 用 例 重新 测试 ， 确 认 是 否 有 新 缺陷 ， 或 者 老 缺陷 是 否 已 经 
得 到 了 修正 。 

长 久 以 来 ， 这 种 传统 的 手工 测试 模式 在 各 大 公司 广泛 应 用 ， 并 已 被 证 明 其 能 够 行 之 有 
效 地 保证 产品 质量 。 但 伴随 着 互联 网 技术 的 发 展 ， 这 种 传统 的 测试 模式 已 经 显示 出 越 来 越 
多 的 瓶颈 。 

1. 重复 性 工作 ， 测 试 质量 低 

现在 的 互联 网 产品 开发 讲究 的 是 短平快 ， 小 步 快走 ， 短 则 两 三 天 ， 长 则 一 个 星期 就 会 
发 布 新 版 本 。 在 这 短 短 的 时 间 里 ， 测 试 人 员 需 要 把 新 版 本 部 署 到 测试 环境 ， 更 新 数据 库 ， 
然后 对 所 有 测试 用 例 进 行 手工 验证 。 这 个 过 程 时 间 紧 迫 ， 工 作 量 大 ， 而 且 具 有 很 高 的 机 械 
性 和 重复 性 。 当 测试 人 员 长 期 工作 在 重复 性 的 验证 事务 上 时 ， 往 往 会 因为 思维 惯性 而 忽略 
新 出 现 的 问题 ， 最 后 导致 不 仅 测试 人 员 自 身 缺 乏 工 作 热情 ， 而 且 测试 质量 更 难以 保证 。 

2. 测试 效率 低 

手工 测试 天 生 就 决定 了 它 的 执行 效率 很 低 。 测 试 人 员 需 要 根据 测试 用 例 逐 行 逐 句 阅 
读 ， 然 后 在 页 面 上 一 步 步 填写 表单 ， 再 单 击 按钮 提交 。 这 是 一 个 非常 烦琐 的 过 程 。 而 遇 到 
复杂 的 业务 流程 更 是 涉及 方方面面 ， 作 者 甚至 见 过 一 个 多 小 时 都 无 法 完成 的 测试 案例 。 到 
了 开发 后 期 ， 可 能 每 天 或 者 每 两 天 就 要 发 布 一 个 版 本 进行 测试 。 如 果 一 个 软件 系统 的 功能 
点 有 几 千 甚至 上 万 个 ， 手 工 测试 将 特别 耗 时 和 烦琐 ， 不仅 消 耗 了 大 量 的 人 力 ， 还 可 能 影响 
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到 产品 的 如 期 发 布 。 

3. 无 法 保证 覆盖 代码 全 路 径 

是 否 有 良好 的 测试 覆盖 是 考核 测试 成 熟 度 的 重要 指标 ， 其 核心 思想 是 对 相同 的 业务 逻 
辑 提供 多 组 甚至 几 十 组 输入 ， 全 面 覆 盖 到 业务 中 的 绝 大 多 数 路 径 ， 重 点 考察 软件 的 边界 行 
为 。 比 如 某 个 页 面 输 入 框 的 字符 个 数 在 开发 中 被 限制 为 256 个 字符 ， 但 测试 人 员 很 可 能 漏 
掉 这 样 的 极端 输入 情况 。 由 于 手工 测试 效率 很 低 ， 不 要 说 进行 几 十 组 数据 的 测试 ， 就 是 几 
组 可 能 都 难以 实施 。 另 外 ， 有 些 软件 缺陷 需要 在 大 量 数据 或 者 大 量 并 发 用 户 的 情况 下 才 会 
暴露 ， 很 难 通过 手工 测试 保证 代码 的 全 路 径 覆 盖 。 

4. 无 法 有 效 兼顾 多 浏览 器 、 多 平台 

Web 前 端的 测试 环境 复杂 ， 兼 容 性 要 求 高 ， 特 别 是 要 同时 兼顾 多 种 操作 系统 ， 包 括 
Windows、Mac 0OS 和 Linux， 以 及 不 同 的 浏览 器 ， 包 插 IE、Edge、Chrome、Firefox 等 ， 如 
果 还 考虑 各 个 操作 系统 和 浏览 器 的 不 同 版 本 ， 排 列 组 合 之 后 将 会 是 个 通过 手工 测试 无 法 
企及 的 数字 。 很 难 想象 有 哪个 公司 能 够 持续 投入 巨大 的 人 力 成 本 完成 如 此 庞大 的 手工 测试 
工程 。 


1.4 ”开发 模式 的 转型 


针对 传统 开发 流程 和 手工 测试 的 局 限 性 ， 各 大 企业 迫切 需要 对 开发 模式 进行 转型 ， 以 
应 对 现代 Web 应 用 开发 周期 短 ， 更 新 频繁 等 挑战 ， 同 时 做 到 尽早 识别 测试 风险 ， 通 过 合理 
的 应 对 策略 保证 产品 质量 。 


1.4.1 敏捷 软件 开发 


敏捷 软件 开发 (Agile Software Development) 是 一 类 已 经 引起 广泛 关注 的 软件 开发 方 
法 ， 是 为 应 对 需求 快速 变化 而 发 展 出 的 软件 开发 方法 。 有 多 种 敏捷 开发 方法 ， 例 如 极限 
编程 (Extreme Programming) 、 精 益 开 发 (Lean Software Development) 、 特 征 驱 动 开发 
(Feature-Driven Development) 等 ， 它 们 有 以 下 共同 的 特征 ， 如 图 1-3 所 示 : 
@ 迭代 式 开 发 。 整 个 开发 过 程 被 分 为 几 个 迭代 周期 ， 每 个 迭代 周期 持续 的 时 间 一 般 
较 短 ， 通 常 为 1 一 4 周 。 
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@ 增 量 交 付 。 产 品 是 在 每 个 迭代 周期 结束 时 被 逐步 交付 使 用 的 ， 每 次 交付 的 都 是 可 
以 被 部 署 、 能 给 用 户 带 来 即时 效益 和 价值 的 产品 。 

@ 及 时 反馈 。 敏 捷 软 件 开 发 主张 用 户 能 够 全 程 参 与 到 整个 开发 过 程 中 。 这 使 需求 变 
化 和 用 户 反馈 能 被 动态 管理 并 及 时 集成 到 产品 中 。 

@ 关注 软件 质量 。 在 开发 的 整个 周期 中 都 关注 产品 的 质量 。 开 发 过 程 中 使 用 的 各 种 
工具 和 方法 ， 例 如 持续 集成 、 测 试 自动 化 、 测 试 驱 动 开发 等 都 为 敏捷 项 目的 整个 
开发 周期 提供 了 可 靠 的 质量 保证 。 


图 1-3 ”敏捷 软件 开发 

因为 敏捷 软件 开发 拥有 更 强 的 灵活 性 、 更 短 的 开发 周期 、 持 续 反 馈 等 优点 ， 所 以 敏捷 
开发 被 越 来 越 多 的 软件 开发 企业 和 团队 所 接受 。 

1. 更 强 的 灵活 性 

相对 于 传统 的 瀑布 模型 ， 敏 捷 开发 尝试 以 更 加 灵活 的 方式 让 每 个 开发 阶段 都 并 行 发 
生 ， 更 强调 开发 周期 内 开发 团队 与 客户 、 开 发 团队 内 各 个 角色 之 间 的 紧密 协作 和 有 效 交 
流 ， 以 便 更 早 发 现 问题 ， 从 而 降低 改正 问题 的 成 本 和 提高 项 目 成 功 的 几率 。 

2. 更 短 的 开发 周期 

敏捷 开发 是 将 一 个 大 项 目 分 为 多 个 相互 联系 ， 但 也 可 独立 运行 的 小 项 目 ， 并 分 别 予 以 
完成 。 这 种 模式 强调 的 是 尽早 将 可 用 的 功能 交付 使 用 ， 并 在 整个 项 目 周期 中 持续 改善 和 增 
强 。 更 重要 的 是 ， 在 每 个 迭代 周期 中 ， 功 能 特性 被 开发 和 测试 ， 所 有 发 现 的 问题 都 被 及 时 
修正 。 这 样 ， 开 发 人 员 和 测试 人 员 之 间 的 时 间 鸿 沟 就 消失 了 ， 因 为 他 们 始终 在 相同 的 迭代 
周期 中 协作 。 

3. 持续 反馈 

敏捷 开发 短 而 多 的 和 途 代 周 期 为 功能 调整 提供 了 可 能 性 。 用 户 能 够 全 程 参与 到 整个 开发 
过 程 中 ， 敏 捷 团 队 几乎 可 以 在 任何 时 间 满 足 用 户 不 断 变化 的 需求 。 

4. 测试 和 开发 技能 的 融合 

在 敏捷 软件 开发 中 ， 测 试 和 开发 之 间 的 界限 变 得 模糊 。 一 方面 ， 当 敏捷 团队 配备 相对 
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独立 的 测试 人 员 时 ， 测 试 人 员 往 往 需要 有 一 定 的 开发 能 力 ， 才 能 和 开发 人 员 紧 密 配 合 完 
测试 ， 满 足 项 目 进度 的 要 求 。 另 外 一 方面 ， 当 测试 角色 由 开发 人 员 兼 任 的 时 候 ， 开 发 人 员 
需要 培养 自己 良好 的 测试 技能 ， 包 括 测试 用 例 的 设计 开发 以 及 执行 和 结果 分 析 能 力 。 


1.4.2 全 流程 测试 


作为 保证 软件 质量 手段 之 一 的 测试 ， 不 应 该 仅仅 局 限于 软件 开发 中 的 某 个 阶段 ， 它 
应 该 贯穿 于 整个 软件 开发 的 全 过 程 。 测 试 开始 的 时 间 越 早 (test early) ， 测 试 执行 越 频繁 
(test often) ， 就 可 以 越 早 暴露 和 发 现 软件 系统 存在 的 质量 风险 。 根 据 测试 在 软件 开发 过 
程 中 所 处 的 阶段 和 作用 ， 可 分 为 单元 测试 、 集 成 测试 和 端 到 端 测试 等 。 

1. 单元 测试 ( Unit Test ) 

软件 开发 过 程 中 ， 最 基本 的 测试 就 是 单元 测试 。 这 是 针对 程序 单元 〈 软 件 设计 的 最 小 
单位 ) 来 进行 正确 性 检验 的 测试 工作 。 程 序 单元 是 应 用 的 最 小 可 测试 部 件 。 在 过 程 化 编程 
中 ， 一 个 单元 就 是 单个 程序 、 函 数 、 过 程 等 ， 对 于 面向 对 象 编程 ， 最 小 单元 就 是 方法 ， 包 
括 基 类 〈 超 类 ) 、 抽 象 类 或 者 派生 类 〈 子 类 ) 中 的 方法 。 在 企业 的 质量 控制 体系 中 ， 单 元 
测试 由 开发 部 门 在 软件 提交 测试 部 门 前 完成 。 

单元 测试 的 目标 是 打破 程序 单元 间 的 依赖 关系 ， 隔 离 单 元 并 证 明 这 些 单个 单元 是 正确 
的 ， 所 以 单元 测试 应 该 无 依赖 和 隔离 。 通 常 在 单元 测试 中 ， 把 系统 的 依赖 组 件 提取 出 来 ， 
用 测试 替身 〈Test Double) 取而代之 ， 把 单元 测试 把 注意 力 集中 放 在 测试 “单元 ”的 逻辑 
上 而 不 是 和 第 三 方 系统 的 交互 上 ， 如 图 1-4 所 示 。 常 见 的 依赖 组 件 有 网 络 、 数 据 库 、 第 三 
方 类 库 和 文件 系统 等 。 





























图 1-4 ”单元 测试 
2. 集成 测试 ( Integration Test ) 
即使 一 个 程序 单元 在 隔离 状态 下 运作 良好 ， 也 并 不 能 确定 它们 放 在 一 起 能 正常 工作 。 
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集成 测试 是 取出 应 用 程序 里 可 以 独立 运行 的 组 件 ， 通 常 是 一 些 单元 的 集合 ， 来 测试 这 些 单 
元 作为 一 个 整体 的 表现 ， 以 验证 它们 能 和 否 协调 一 致 地 运作 《〈 如 图 1-5) 。 集 成 测试 一 般 用 
于 单元 测试 之 后 ， 端 到 端 测试 之 前 。 

例如 一 个 常见 的 集成 测试 场景 是 使 用 数据 组 件 对 数据 库 进 行 操作 的 测试 。 测 试 人 员 
需要 安装 并 配置 好 数据 库 ， 然 后 在 数据 库 里 插入 预先 准备 好 的 数据 ， 再 执行 需要 测试 的 组 
件 ， 运 行 完 毕 后 检验 数据 库 里 的 数据 。 在 这 个 测试 场景 中 ， 被 测 的 单元 依赖 数据 库 访问 模 
块 (例如 Microsoft Entity Framework) ， 和 一 台 真 实 的 数据 库 〈 外 部 系统 ) ， 所 以 它 不 
是 一 个 单元 测试 ， 但 是 它 也 没有 模拟 一 个 完整 的 用 户 真 实 场景 ， 所 以 它 也 不 是 一 个 端 到 端 
测试 。 









































单元 测试 集成 测试 

| 程序 单元 
一 一 站 上 1 
被 测 单 元 ， | 其 他 单元 | | 外 部 系统 | ， 











图 1-5 ”集成 测试 

3. 端 到 端 测试 ( End-to-End Test ) 

端 到 端 测试 〈 缩 写 为 E2E Test) 是 把 产品 或 服务 当 作 一 个 整体 进行 验证 。 典 型 的 做 法 
是 模拟 真实 的 用 户 场景 ， 通 过 与 系统 的 需求 定义 作 比 较 ， 来 发 现 产品 与 需求 定义 不 符合 或 
存在 矛盾 的 地 方 ， 其 最 终 目 的 为 了 发 布 产 品 。 例 如 在 Web 应 用 程序 中 ， 测 试 人 员 会 启动 服 
务 器 ， 打 开 浏 览 器 ， 访 问 被 测 网 页 ， 并 操作 网 页 上 需要 测试 的 功能 ， 检 查 浏览 器 中 发 生 的 
特定 的 事件 ， 以 确保 被 测 功 能 可 以 正常 运行 。 

端 到 端 测试 通常 由 测试 部 门 完 成 ， 一 般 有 以 下 特性 : 

@ 需要 搭建 专门 的 测试 环境 模拟 真实 的 用 户 场景 ， 成 本 较 高 。 

@ 测试 用 例 复杂 ， 运 行 时 间 长 。 

@ 一 旦 测试 发 现 问 题 ， 由 于 涉及 的 模块 比较 多 ， 定 位 问题 难度 较 高 。 

端 到 端 测 试 可 以 手工 完成 ， 也 可 以 编写 测试 框架 和 测试 代码 自动 执行 。 在 Web 前 端 应 
用 中 ， 端 到 端 测试 通常 从 用 户 界面 开始 ， 核 实用 户 与 应 用 之 间 的 交互 ， 确 保 用 户 界面 向 用 
户 提供 了 适当 的 访问 测试 对 象 功能 的 操作 ， 同 时 还 要 确保 内 部 的 对 象 符合 预期 要 求 。 如 果 
进行 手工 测试 的 话 ， 效 率 低下 ， 无 法 满足 快速 迭代 的 Web 前 端 应 用 的 测试 需求 ， 所 以 迫切 
需要 将 Web 前 端 应 用 的 端 到 端 测试 自动 化 。 本 书 第 三 篇 介绍 的 自动 化 测试 指 的 就 是 自动 化 
的 端 到 端 测 试 。 
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1.4.3 ”让 测试 自动 化 


相对 于 手工 测试 ， 测 试 自动 化 是 把 以 人 为 驱动 的 测试 行为 转化 为 机 器 执行 的 一 种 过 
程 。 需 要 避免 的 误区 是 ， 测 试 自动 化 并 不 是 要 彻底 摆脱 测试 人 员 ， 而 是 一 种 由 人 设计 机 器 
行为 ， 让 机 器 驱动 测试 的 新 模式 。 

实施 测试 自动 化 后 ， 执 行者 是 机 器 ， 它 可 以 24 小 时 不 停 地 运行 测试 代码 ， 充 分 利用 硬 
件 资源 ， 提 高 测试 效率 。 对 于 一 些 手工 完成 困难 或 不 可 能 进行 的 测试 ， 例 如 测试 大 量 用 户 
同时 在 线 的 情况 ， 测 试 自动 化 也 可 以 模拟 这 些 用 户 ， 提 高 测试 用 例 的 广度 。 测 试 自动 化 对 
Web 前 端 应 用 的 回归 测试 效果 也 非常 明显 。Web 前 端 应 用 更 新 频繁 ， 因 为 测试 自动 化 的 测 
试用 例 可 以 重复 使 用 ， 保 证 了 测试 环境 和 测试 路 径 的 一 致 性 ， 这 不 仅 可 以 缩短 回归 测试 的 
时 间 ， 而 且 很 容易 发 现代 码 修改 引起 的 回归 缺陷 。 


1.4.4 ”持续 集成 


测试 自动 化 是 进行 快速 迭代 开发 的 关键 一 步 。 然 而 ， 如 果 测 试用 例 执 行 失败 了 ， 是 否 
有 一 个 清晰 的 工作 流程 以 优先 级 排序 形式 标注 软件 缺陷 ， 反 映 与 商业 风险 的 关联 关系 ， 以 
及 列 出 哪些 是 急需 解决 的 问题 ? 同时 ， 随 着 软件 开发 复杂 度 的 不 断 提高 ， 团 队 成 员 间 如 何 
更 好 地 协同 工作 以 确保 软件 质量 ， 能 否 通过 流程 管理 解决 软件 开发 的 上 下 游 协 作 ? 这 些 已 
经 成 为 开发 过 程 中 不 可 回避 的 问题 。 软 件 开发 急需 一 种 自我 管理 、 自 我 适应 ， 让 开发 自动 
化 起 来 的 新 模式 。 
持续 集成 《Continuous Integration) 是 一 个 频繁 持续 的 在 团队 内 进行 业务 集成 ， 自 我 
反馈 完善 的 软件 开发 实践 。 根 据 Martin Fowler 的 观点 ?， 持 续集 成 要 求 团队 成 员 经 常 集成 
他 们 的 工作 ， 每 个 人 至 少 每 天 集成 一 次 。 持 续集 成 通过 自动 化 构建 ， 把 包括 编译 、 部 署 、 
测试 、 审 计 和 反馈 的 一 组 流程 用 一 体 化 方案 驱动 起 来 ， 整 个 流程 不 需要 任何 用 户 的 人 工 
干预 。 
持续 集成 的 好 处 有 : 
@ 可 以 及 早 发 现 缺陷 。 持 续集 成 要 求 每 天 多 次 进行 集成 并 执行 测试 和 审查 ， 这 可 以 
确保 新 增 代码 不 会 破坏 之 前 的 运作 。 即 使 出 现 了 回归 缺陷 ， 开 发 人 员 也 可 以 迅速 
获得 通知 ， 及 时 修复 缺陷 。 





中 Martin Fowler. Continuous Integration[OL]. 2006. http://www.martinfowler.com/articles/ 


continuousIntegration.html. 
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@ 通过 构建 自动 化 过 程 ， 减 少 开发 测试 人 员 的 重复 劳动 。 

@ 团队 成 员 在 任何 时 间 点 上 提交 的 代码 都 可 以 进行 集成 ， 这 使 得 开发 团队 能 随时 发 
布 可 部 署 的 软件 。 

@ 持续 集成 良好 的 架构 可 以 有 效 实 现 分 布 式 团队 的 协作 沟通 ， 让 团队 成 员 任何 时 候 
都 能 了 解 产品 的 状态 ， 实 时 地 知道 当前 已 经 完成 了 什么 功能 ， 还 有 什么 缺陷 需要 
修复 。 


1.4.5 DevOps 


在 传统 的 软件 开发 中 ， 开 发 、 测 试 和 运 维 都 有 独立 运行 的 部 门 。 虽 然 敏捷 软件 开发 模 
糊 了 需求 、 架 构 、 开 发 、 测 试 之 间 的 界限 ， 但 是 各 部 门 间 仍 然 存在 着 信息 “鸿沟 ”。 例 如 
运 维 人 员 更 关注 产品 的 日 常 运作 、 可 靠 性 和 安全 性 ， 而 开发 人 员 通 常 把 主要 精力 放 在 新 功 
能 的 开发 上 。 
现代 Web 应 用 和 移动 应 用 需要 频繁 而 持续 的 发 布 。 软 件 产品 会 被 部 署 到 大 量 的 机 器 集 
群 上 ， 同 时 要 求 不 中 断 和 破坏 当前 服务 。 这 些 产品 在 发 布 前 需要 通过 相关 测试 ， 发 布 后 则 
要 求实 时 监控 ， 支 持 故障 转移 、 服 务 降级 、 快 速 定位 和 故障 修复 。 但 是 在 传统 的 开发 运 维 
流程 下 : 
@ 运 维 人 员 可 能 对 应 用 程序 内 部 缺乏 了 解 ， 难 以 正确 快速 地 配置 环境 和 发 布 应 用 。 
@ 开发 测试 环境 和 真实 生产 环境 不 同 ， 运 维 人 员 需 要 修改 部 署 脚本 和 配置 文件 来 适 
应 生产 环境 ， 这 有 可 能 引入 新 的 问题 ， 延 组 产品 的 部 署 。 
@ 开发 人 员 可 能 对 生产 环境 缺乏 了 解 ， 从 而 难以 优化 代码 及 配置 ， 造 成 应 用 在 生产 
环境 下 达 不 到 预期 运行 的 效果 。 
@ 开发 人 员 通 常 关注 的 是 与 业务 需求 直接 相关 的 功能 ， 而 没有 考虑 监控 、 故 障 定位 
等 运 维 需 要 的 功能 。 一 旦 应 用 在 生产 环境 下 发 生 故 障 ， 运 维 人 员 无 法 及 时 采取 措 
施 来 恢复 运行 。 
@ 开发 人 员 对 配置 和 环境 做 了 修改 后 ， 没 有 及 时 与 运 维 人 员 沟 通 ， 经 常 造成 新 代码 
无 法 在 产品 环境 下 运行 ， 产 品 无 法 及 时 发 布 。 
基于 以 上 原因 ， 近 年 来 在 软件 开发 领域 一 个 新 概念 DevOps (Development 和 Operations 
的 组 合 ) 开始 流行 。DevOps 是 一 种 重视 软件 开发 过 程 中 各 个 团队 之 间 沟 通 合作 的 文化 、 
运动 或 惯例 ， 通 过 自动 化 的 流程 ， 使 得 开发 、 构 建 、 测 试 、 发 布 软件 能 够 更 加 快捷 、 频 繁 
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和 可 靠 ， 如 图 1-69 所 示 。 






Quality 
Development 全 i 


图 1-6 DevOps 

DevOps 不 是 一 种 技术 或 工具 ， 而 是 一 种 文化 转变 ， 它 鼓励 团队 合作 ， 以 便 更 快 地 构 
建 可 靠 性 更 高 、 质 量 更 好 的 软件 : 

@ 运 维 人 员 要 懂得 产品 的 架构 与 功能 ， 而 不 仅仅 是 管理 员 手 册 。 

@ 开发 测试 人 员 要 懂 实 际 的 运 维 ， 包 括 从 实际 部 署 、 上 线 流 程 ， 到 故障 的 定位 与 

解决 。 

@ 运 维 所 需 的 功能 甚至 基础 设施 要 成 为 产品 非 功 能 性 需求 的 一 部 分 。 

@ 产品 交付 与 运 维 需要 集成 到 整个 软件 生命 周期 中 。 

从 瀑布 模型 到 敏捷 开发 ， 敏 捷 开 发 到 持续 集成 ， 持 续集 成 到 DevOps， 不 管 流程 如 何 
制定 ， 目 的 都 是 相同 的 ;在 不 牺牲 质量 的 情况 下 更 快 地 交付 产品 。 





1.5 本 书目 标 


对 Web 前 端 应 用 进行 测试 之 所 以 困难 ， 一 方面 是 因为 代码 运行 的 环境 几乎 无 法 控制 ， 
各 种 类 型 的 操作 系统 ， 各 种 版 本 的 操作 系统 ， 各 种 类 型 的 浏览 器 ， 各 种 版 本 的 浏览 器 ， 各 
种 语言 、 插 件 、 扩 展 ， 各 种 前 端 框架 都 交织 在 一 起 ; 另 一 方面 其 快速 迭代 的 特性 使 得 测试 
周期 短 ， 测 试 质量 难以 保证 。 

同时 ，Web 前 端 应 用 开发 模式 的 转型 也 给 开发 人 员 和 测试 人 员 带 来 了 新 的 挑战 。 开 发 
人 员 需 要 了 解 一 定 的 测试 方法 和 思维 才能 设计 出 良好 的 测试 用 例 。 而 测试 人 员 需 要 一 定 的 


@® Wikipedia. DevOps[OL]. [2016]. https://en.wikipedia.org/wiki/DevOps. 
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技术 能 力 才能 充分 利用 自动 化 测试 工具 提高 测试 效率 。 由 于 测试 和 开发 进行 了 融合 ， 所 以 
无 论 是 开发 人 员 还 是 测试 人 员 ， 都 需要 不 断 提高 自身 的 能 力 和 价值 。 

本 书目 标 是 通过 介绍 : 

@ 单元 测试 

@ 自动 化 测试 

@ 持续 集成 

使 读者 了 解 如 何 利用 各 种 工具 框架 编写 测试 用 例 ， 对 Web 前 端 应 用 进行 高 效 测试 ， 并 
最 终 提 高 软件 产品 的 质量 。 


第 2 音 
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A 





编写 和 运行 本 书 的 示例 代码 需要 相应 的 工具 和 运行 环境 。 本 章 将 介绍 测试 基础 环境 的 
搭建 和 常用 工具 。 
本 章 将 介绍 : 


@ JavaScript 的 运行 环境 Node.js 
@ 软件 包 管 理 系统 Node Package Manager (npm) 
@ 代码 编辑 器 (Visual Studio Code) 


2.1 JavaScript 的 运行 环境 Node.js 


2.1.1 什么 是 Node.js 


Node.js 这 个 名 字 很 容易 让 人 以 为 是 一 个 JavaScript 的 应 用 或 类 库 。 实 际 上 ，Node.js 是 
一 个 JavaScript 的 运行 环境 ， 主 要 采用 C++ 语 言 编写 而 成 ?。 

要 了 解 Node.js， 首 先 要 了 解 什 么 是 JavaScript 引 擎 。JavaScript 是 一 门 高 级 语言 ， 计 算 
机 并 不 能 直接 执行 ， 所 以 需要 使 用 所 谓 的 引擎 来 将 其 转换 成 计算 机 能 理解 的 机 器 语言 。 最 
初 ，JavaScript 主 要 运行 在 浏览 器 里 ， 浏 览 器 中 的 JavaScript 引 擎 负责 解析 和 执行 网 页 中 的 
JavaScript 代 码 ， 并 提供 代码 执行 的 运行 环境 ， 例 如 内 存 管理 〈 内 存 分 配 ， 垃 圾 回收 ) 、 
即时 编译 (Just-in-time Compilation) 、 类 型 系统 (Type System) 等 服务 。 

C# 和 JavaScript 的 运行 环境 对 比 ， 如 表 2-1 所 示 。 


© RyanDahl. node.js[OL]. 2009. http://s3.amazonaws.com/fourlivejournal/20091117/isconf.pdf. 
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表 2-1 ”C# 和 JavaScript 的 运行 环境 比较 
C# 的 运行 环境 JavaScript 的 运行 环境 


浏览 器 的 JavaScript 引 擎 (Chrome/V8、IE/ 
Chakra、 Firefox/*Monkey) 


如 果 能 把 JavaScript 引 擎 从 浏览 器 中 独立 出 来 ， 那 么 JavaScript 代 码 就 可 以 被 移植 到 浏 
览 器 以 外 的 环境 中 执行 ， 和 其 他 高 级 编程 语言 一 样 做 网 页 交互 以 外 的 事情 ， 从 而 大 大 拓宽 
了 JavaScript 的 应 用 范围 。 

2008 年 ，Google 公 司 为 Chrome 浏 览 器 开发 了 开源 JavaScript 引 擎 V8。Nodejs 的 诞生 可 
以 说 很 大 程度 上 归功 于 V8 引擎 的 出 现 。 当 时 其 他 JavaScript 引 擎 对 JavaScript 代 码 进行 解释 
执行 ， 性 能 较 差 ， 而 V8 使 用 即时 编译 ， 在 代码 执行 前 将 JavaScript 编 译 成 二 进 制 机 器 码 再 
执行 ， 极 大 地 改善 了 JavaScript 程 序 的 性 能 ， 使 得 JavaScript 程 序 在 V8 引擎 下 的 运行 速度 可 
以 媲美 二 进 制 程序 。 

除了 能 够 大 幅 提升 JavaScript 性 能 ，V8 引 擎 也 可 以 作为 独立 的 模块 ， 由 开发 者 在 自己 
的 C++ 程序 中 “ 舱 入 ”V8 引 擎 ， 从 而 高 效 地 编译 JavaScript。 

2009 年 ，Ryan Dahl 创 建 了 基于 V8 引擎 的 Node.js 项 目 ( 后 来 得 到 Joyent 公 司 的 资助 )。 
Node.js 是 一 个 开源 的 、 跨 平台 的 JavaScript 运 行 环境 ， 最 初 发 布 在 Linux 平 台 上 ， 直 到 2011 
年 7 月 ， 在 微软 的 支持 下 才 发 布 了 Windows 版 本 。 它 对 V8 引擎 进行 了 封装 ， 并 提供 很 多 系 
统 级 的 接口 调用 ， 如 文件 操作 、 网 络 编程 等 ， 可 以 用 JavaScript 编 写 响应 速度 快 、 易 于 扩 
展 的 网 络 应 用 。 

Ryan Dahl 创 造 Node.js 的 目的 是 为 了 实现 高 性 能 的 Web 服 务 器 。 在 传统 服务 器 软件 开发 
中 ， 并 发 的 请 求 处 理 一 直 是 个 大 问题 。 传 统 服务 器 模型 通常 为 每 一 个 请 求生 成 一 个 新 线程 
或 新 进程 ， 一 方面 服务 器 创建 新 线程 /新 进程 会 造成 延 时 ， 另 外 一 方面 ， 新 线程 /新 进程 会 
消耗 额外 的 内 存 ， 浪 费 资源 。 在 这 种 传统 模型 中 ， 如 果 应 用 程序 的 某 个 任务 很 耗 时 ， 涉 及 
到 大 量 IO 操作 《比如 访问 文件 ) ， 对 应 的 线程 就 处 于 一 种 不 占用 CPU， 而 只 是 等 待 响应 
的 状态 ， 直 到 数据 传输 完成 。 但 由 于 等 待 期 间 该 线程 /进程 依然 占用 着 资源 ， 当 大 量 并 发 
请 求 到 达 时 ， 就 会 产生 阻塞 ， 造 成 服务 器 瓶颈 。 

Node.js 以 事件 驱动 为 核心 , 使 用 非 阻塞 JO 模 型 ， 它 为 每 个 连接 发 出 〈emit) 一 个 事件 
(event) ， 放 进 事件 队列 当中 ， 而 不 是 为 每 个 连接 生成 一 个 新 的 线程 /进程 。 理 论 上 ， 只 
要 有 用 户 请 求 连接 ，Node.js 都 可 以 进行 响应 。 同 时 ， 该 IO 模型 提供 的 绝 大 多 数 应 用 编程 
接口 都 是 基于 事件 的 、 异 步 的 风格 。 开 发 人 员 根据 自己 的 业务 逻辑 需要 在 相应 的 事件 上 注 
册 回 调 函数 ， 这 些 回调 函数 在 相应 事件 触发 后 被 调用 。 例 如 ， 当 应 用 程序 发 生 一 个 IO 操 
作 《〈 比 如 访问 文件 ) 时 ，Node:js 的 主线 程 可 以 继续 执行 ， 而 无 需 等 待 这 个 操作 完成 ， 等 到 








Net 的 Common Language Runtime (CLR) 
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这 个 LO 操作 完成 ， 相 应 事件 被 触发 的 ， 回 调 函 数 被 再 执行 。 这 使 得 Nodejs 在 相对 较 低 的 
系统 资源 消耗 下 具有 高 性 能 与 出 众 的 高 并 发 能 力 。 

JavaScript 是 Node.js 的 天 然 载体 语言 ， 因 为 它 允 许 使 用 匿名 函数 和 闭 包 ， 非 常 适合 事 
件 驱动 和 异步 编程 。 并 且 JavaScript 作 为 一 门 编程 语言 自身 不 带 IO 功 能 〈 一 般 的 编程 语言 
都 带 一 个 IO 模块 ， 很 不 幸 的 是 这 个 模块 通常 是 同步 的 ， 而 JavaScript 最 初 是 在 浏览 器 内 运 
行 ， 浏 览 器 负责 W/O， 所 以 JavaScript 没 有 这 个 历史 包 裕 》。 

Nodejs 自 诞生 以 来 发 展 迅 速 ， 社 区 活跃 ， 吸 引 全 世界 开发 者 为 其 贡献 了 大 量 的 工具 、 
模块 和 框架 。 很 多 企业 也 逐渐 开始 采用 Nodejs 开 发 项 目 。 

本 书 虽 然 不 是 介绍 如 何 利 用 Nodejs 开 发 高 性 能 Web 应 用 的 ， 但 是 示例 所 需 的 很 多 工具 
和 框架 依赖 于 Nodejs 的 JavaScript 运 行 环境 ， 所 以 需要 安装 Node.js。 


2.1.2 Node.js 的 版 本 发 展 


初次 接触 Node.js 的 读者 ， 可 能 会 对 Node.js 的 版 本 产生 困惑 。 你 可 能 看 到 过 v0.8.x、 
V0.10.x、v0.11.x、v0.12.x 等 版 本 ， 然 后 版 本 号 突然 变 成 4.x.x〔 本 书 编写 时 最 新 版 本 号 是 
6.8.1) ， 这 和 Nodejs 的 发 展 历史 有 很 大 的 关系 。 

Ryan Dahl 创 建 Node.js 时 ， 采 用 的 是 和 Linux 内 核 相 同 的 奇偶 版 本 模式 ， 即 版 本 由 3 个 
整数 组 成 ， 格 式 为 “A.B.C”，A 代 表 主 版 本 号 ，B 代 表 次 版 本 号 ，C 代 表 较 小 的 末 版 本 
号 。 只 有 在 内 核发 生 很 大 变化 时 ，A 才 变化 。C 代 表 一 些 缺 陷 修复 、 安 全 更 新 、 新 特性 和 
驱动 的 次 数 。 而 通过 数字 B 来 判断 产品 是 否 稳定 ， 偶 数 的 B 代 表 稳 定 版 ， 奇 数 的 B 代 表 不 稳 
定 的 开发 版 。 

2010 年 ，Joyent 公 司 雇 用 了 Ryan Dahl 并 让 其 专职 负责 Nodejs 的 发 展 ， 在 此 同时 ， 还 得 
到 了 Node 的 品牌 使 用 权 2。Joyent 的 Node js 继续 使 用 奇偶 版 本 模式 ， 比 如 v0.8.x、v0.10x、 
V0.11.x、v0.12.x。 

2012 年 ，Ryan Dahl 离 开 了 Node.js 的 项 目 负责 岗位 并 淡出 了 公众 视野 。Ryan Dahl 离 开 
后 ，Nodejjs 开源 社区 的 贡献 者 和 Joyent 发 布 的 更 新 数量 都 在 不 断 缩减 。 

2014 年 12 月 ， 由 于 对 Joyent 公 司 垄 断 Node.jjs 项 目 以 及 该 项 目 进展 缓慢 的 不 满 ， 一 部 分 
核心 开发 者 离开 了 Node.js， 创 造 了 io.js 项 目 。 这 是 一 个 更 开放 、 更 新 更 频繁 的 Node.js 版 
本 。iojs 的 版 本 策略 是 语义 化 版 本 (Semantic Versioning) 2， 使 用 3 个 整数 表示 向 后 兼容 的 


© RyanDahl. Joyent & Node[OL]. 2010. https://groups.google.com/d/msg/nodejs/IWoOMbHZ6Te/6z2C45u6mpAT. 
人 @) Tom Preston-Werner. Semantic Versioning 2.0.0[OL]. [2016-10-19]. http://semver.org. 
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程度 ， 格 式 为 MAJOR.MINOR .PATCH: 
@ MAJOR (主要 ) 。 此 位 版 本 号 表示 此 版 本 号 和 前 一 个 版 本 号 在 API 上 不 兼容 ， 如 
3.0.0 的 API 可 能 不 兼容 2.0.0 的 请 求 。 

@ MINOR (次 要 ) 。 此 位 版 本 号 表示 新 添加 了 一 个 功能 ， 且 保持 旧 功 能 完全 向 后 

@ PATCH (补丁 ) 。 此 位 版 本 号 表示 修复 了 以 前 功能 的 Bug， 且 完全 向 后 兼容 。 

2015 年 2 月 ，Joyent 公 司 宣布 放弃 对 Node.js 项 目的 控制 ， 将 其 转交 给 新 成 立 的 开放 性 
质 的 Node.js 基 金 会 。 

2015 年 9 月 ，io.js 项 目 宣布 回归 Node.js。Joyent 的 Node.js v0.12.7 和 io.js 的 v3.3.1 合 并 成 
新 的 Node v4.0， 这 是 为 了 防止 与 后 续 Joyent 的 Node.js 0.x.x 维护 计划 和 任何 现 有 的 io.js 版 
本 发 生 冲 突 。 这 次 合并 之 后 ， 整 个 项 目 采 用 语义 化 版 本 编号 策略 。 所 以 4.0.0 是 重生 后 的 
Nodejs 真 正 的 “1.0” 版 本 。 

注意 ， 如 果 读 者 使 用 的 是 Visual Studio 2015， 安 装 时 可 能 选 装 Joyent Nodejs， 如 图 2-1 
所 示 ， 但 是 它 的 版 本 是 v0.12.2。 所 以 本 书 建议 采用 从 官网 下 载 安装 包 的 方式 安装 Nodejs。 


vA Visual Studio 


Enterprise 2015 





图 2-1 Visual Studio 2015 安 装 界面 


2.1.3 安装 Node.js 


Nodejs 可 以 在 主流 操作 系统 上 运行 ， 包 括 Windows、Linux 和 Mac OS。Node.js 安 装 包 
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及 源码 下 载 地 址 为 https://nodejs.org/en/download/， 如 图 2-2 所 示 。 


Downloads 


Latest LTS Version: v4.6.0 (includes npm 2.15.9) 


Download the Nodejs source code or a pre-built installer for your platform, and start developing today. 


旺 多 市 

















Current Windows Installer Macintosh Installer Source Code 
Latest Featuras cece wertane serraanre 

Windows Installer (.msi) 32bit G4bit 

Windows Binary (.exe) 22-bit Bit 

macOS Installer (.pkg) Ebit 

macOS Binaries (.tar.gz) G64-bit 

Linux Binaries (x86/x64) 32blt a-bit 

Linux Binaries (ARM) ARMvG ARNv7 ARMve 

Source code node-v4.6.0.targz 


图 2-2 ”Nodejs 下 载 页 面 
用 户 可 以 根据 不 同 操作 系统 选择 所 需要 的 Node.js 安 装 包 。 本 书 示例 基于 Windows 10 操 
作 系 统 ， 采 用 Node.js v4.6.0 LTS (长 期 支持 版 本 ) 的 64 位 Windows 安 装 包 〈(.msi) 来 安装 
Nodejs， 步 骤 如 下 : 
(1) 双击 下 载 后 的 安装 包 node-v4.6.0-x64.msi， 出 现 欢迎 界面 ， 单 击 Next 按 钮 。 
(2) 勾 选 接受 最 终 用户 许 可 协议 选项 ， 单 击 Next 按 钮 ， 如 图 2-3 所 示 。 





项 Nodejs Setup 一 x 
End-User License Agreement d 
Please read the folowing icense agreenent carefuly NAN ge e 


Node.js is licensed for use as follows: 





Copyright Node.js contributors. All rights reserved. 


Permission is hereby granted, free of charge, to any person obtaining 
a copy of this software and associated documentation files (the 
"Software"), to deal in the Software without restriction, including 
[without limitation the rights to use, copy, modify, merge, publish, 
distribute, sublicense, and/or sell copies of the Software, and to 


permit persons to whom the Software is furnished to do so, subject v 











I accept the terms in the License AGOreement 











em | [| sx | 加 [| oe | 





图 2-3 Nodejs 用 户 许可 协议 


(3) 使 用 默认 安装 目录 和 默认 安装 方式 安装 Nodejs。 安 装 完毕 后 单 击 Finish 按 钮 退出 
安装 向 导 ， 如 图 2-4 所 示 。 
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项 Nodejs Setup 一 4 





Completed the Node.js Setup Wizard 


人 四 qd 他 Cidk the Finish button to exit the Setup Wizard. 
昌 


Node.js has been successfully installed. 


Bock Cancel 
图 2-4 ”Node.js 安 装 完成 
打开 命令 控制 台 ， 运 行 以 下 命令 检查 当前 Node.js 的 版 本 : 











C:\>node --version 


V4.6.0 


为 了 验证 Nodejs 能 否 正 常 工作 ， 可 以 直接 输入 node， 按 回 车 键 。 


C:\>node 


如 果 Node.js 成 功 安装 ， 此 时 就 进入 了 Node.js 的 命令 行 模式 ， 可 以 直接 输入 JavaScript 
命令 ， 按 回 车 键 执行 。 例 如 ， 执 行 命令 console.log('Hello World!"): 


C:\>node 
>console.log('Hello World') 
Hello World! 


Undefined 





采用 以 下 两 种 方法 可 以 退出 Nodejs 的 命令 行 模式 : 
® @ 按 两 次 快捷 键 CtrltC。 


@ 输入 .exit， 按 回 车 键 。 
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2.2 ”软件 包 管理 系统 Node Package Manager 
(npm) 


依赖 关系 是 软件 包 管 理 的 一 个 重要 方面 。 每 个 软件 包 都 有 可 能 依赖 其 他 的 软件 包 ， 例 
如 软件 包 A 需 要 软件 包 B， 而 软件 包 B 需 要 软件 包 C。 通 常 这 些 软件 包 并 不 具备 自动 安装 所 
依赖 的 软件 包 的 功能 ， 当 用 户 安装 软件 包 A 时 ， 他 需要 预先 手工 安装 软件 包 B 和 C。 如 果 依 
赖 关系 复杂 的 话 ， 则 用 户 将 不 得 不 花 大 量 精 力 去 处 理 这 些 软件 包 之 间 的 依赖 关系 。 
软件 包 管 理 系统 一 般 能 够 从 软件 源 处 自动 下 载 所 依赖 的 软件 包 并 安装 ， 解 决 软件 包 之 
间 的 依赖 关系 ， 所 以 软件 包 管 理 系统 在 各 种 系统 软件 和 应 用 软件 的 安装 管理 中 均 有 广泛 应 
用 。 例 如 ， 微 软 .Net 开 发 平台 上 的 软件 包 管理 系统 是 NuGet。 
Node Package Manager (npm) 顾名思义 是 Node.js 的 软件 包 管 理 系统 ， 完 全 以 
JavaScript 编 写 ， 支 持 跨 平台 ， 由 Isaac Z. Schlueter 在 2010 年 创建 ， 主 要 功能 包括 : 
@ 一 个 在 线 仓库 (https://registry.npmjs.org) ， 人 允许 开发 人 员 将 自己 编写 的 JavaScript 
软件 包 注 册 并 上 传 到 这 个 在 线 仓库 供 下 载 使 用 。 
@ 命令 行 工具 用 于 解决 JavaScript 软 件 包 的 依赖 关系 ， 例 如 从 在 线 仓库 中 搜索 、 下 
载 、 安 装 、 趣 载 、 更 新 所 需要 的 JavaScript 软 件 包 ， 并 将 它们 整合 到 自己 的 项 目 
中 。 在 本 书 中 npm 主 要 指 这 个 命令 行 工具 。 


2.2.1 安装 和 更 新 npm 


npm 不 需要 单独 安装 ， 安 装 Node.js 时 会 一 并 安装 npm， 它 是 Node.js 的 默认 软件 包 管 理 
工具 。 由 于 npm 更 新 频繁 ，Node.js 附 带 的 npm 可 能 不 是 最 新 版 本 ， 用 户 可 以 在 命令 控制 台 
执行 以 下 命令 将 其 更 新 到 最 新 版 本 。 


npm install npmelatest -9 


运行 npm 命 令 可 查看 各 种 信息 。 
(1) 查看 apm 的 版 本 ， 命 令 如 下 : 
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npm -Vv 


(2) 查看 npm 命 令 列 表 ， 命 令 如 下 : 


npm help 


(3) 查看 npm 的 配置 ， 命 令 如 下 : 


npm config list -1 


2.2.2 package.json 


Node.js 项 目的 根 目录 下 一 般 会 有 一 个 package.json 文 件 。 这 个 文件 定义 了 当前 项 目的 
属性 ， 包 括 项 目 运行 时 所 依赖 的 软件 包 。 
package.json 常 用 属性 如 表 2-2 所 示 。 
表 2-2 package.jjson 常 用 属性 











属性 名 称 描 述 
name 项 目 名 称 ( 全 部 小 写 ， 没 有 空格 ， 人 允许 使 用 下 画 线 和 减 号 ) 
description 项 目 描述 
version 版 本 号 (语义 化 版 本 》 
repository 资源 仓库 地 址 
main 项 目 入 口 文件 
scripts 脚本 
licenses 授权 方式 
dependencies 项 目 运行 所 依赖 的 软件 包 
devDependencies 开发 环境 所 依赖 的 软件 包 











以 下 是 一 个 基本 的 package.json 文 件 。 在 package.json 文 件 中 ， 只 有 name 和 version 字 段 
是 必要 的 ， 其 他 字段 都 是 可 选 的 。 
"name": "myproj", 


"version”: "1.0.0", 


第 2 章 ” 措 建 测试 基础 环境 | 23 | 


"description": 
"Wain"s "index.jo"y 
"dependencies": { 
"jquery": "*3.1.1", 
}, 
"devDependencies": { 
"karma": "^1.3.0" 
}, 
SOGripts ms | 
"test": "echo \"Error: no test specified\" && exit 1" 
}, 
"hor 达 


"license": "ISC" 


以 上 package.json 示 例 定义 了 项 目的 入 口 文 件 为 Index.js。 当 其 他 Node.js 应 用 通过 
require 引 用 这 个 软件 包 时 ，index.js 文 件 将 被 调用 。 

package.json 文 件 可 以 手工 编写 ， 也 可 以 通过 执行 npm init 命 令 自 动 生成 。 该 命令 采 
用 互动 方式 ， 要 求 用 户 回答 一 些 问题 ， 然 后 在 当前 目录 下 生成 一 个 基本 的 package.json 文 
件 。 所 有 问题 之 中 ， 只 有 项 目 名 称 (name) 和 项 目 版 本 (version〉 是 必 填 的 。 

本 书 的 示例 是 Web 前 端 程 序 ， 不 是 Nodejs 项 目 ， 那 为 什么 要 介绍 package.json 文 件 呢 ? 


2.2.3 ”安装 软件 包 


本 书 介 绍 package.json 文 件 ， 是 因为 它 可 以 定义 项 目 运行 时 所 依赖 的 软件 包 
(dependencies) 和 开发 环境 所 依赖 的 软件 包 (devDependencies) 。 有 了 package.json 文 
件 ， 开 发 人 员 可 以 在 项 目 根 目录 下 直接 执行 hpm install 命 令 ， 该 命令 会 根据 package.json 文 
件 从 在 线 仓库 中 下 载 dependencies 和 devDependencies 中 列 出 的 软件 包 ， 安 装 到 当前 目录 的 
node modules 子 目录 中 ， 这 样 就 解决 了 Web 前 端 程序 的 依赖 问题 。 
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package.json 文 件 里 的 dependencies 和 devDependencies 字 段 列 出 的 软件 包 采 
用 语义 化 版 本 ，npm install 会 根据 这 个 信息 下 载 相应 版 本 的 软件 包 ， 例 如 : 


"devDependencies": { 


-arma 人 Ye 


其 中 ，^ 前 组 表示 与 指定 版 本 兼容 ， 最 左边 的 主要 版 本 不 变 ， 但 是 次 要 版 
本 和 补丁 版 本 可 以 是 更 高 的 版 本 。 例 如 “^1.3.0” 表示 这 个 项 目 支持 >=1.3.0 
但 是 <2.0.0 版 本 的 Karma。npm install 会 下 载 符合 条 件 的 最 新 版 本 的 软件 包 。 如 
果 想 要 了 解 更 多 有 关 npm 的 语义 化 版 本 信息 ， 可 以 参考 https://docs.npmjs.com/ 


misc/semver。 


如 果 只 安装 dependencies 字 段 里 列 出 的 软件 包 ， 可 以 执行 以 下 命令 : 











npm install --production 


不 要 将 node_modules 目 录 提 交 到 源 代码 管理 系统 中 。 基 于 package.json， 


只 需要 执行 命令 npm install 就 可 以 恢复 项 目的 开发 和 运行 环境 。 





如 果 项 目 依赖 的 软件 包 没有 被 定义 在 package.json 文 件 里 ， 那 么 这 些 软 件 包 需 要 单独 
安装 。 安 装 软件 包 的 形式 分 两 种 : 本 地 安装 与 全 局 安装 。 

1. 本 地 安装 

本 地 安装 软件 包 的 命令 是 : 


npm install <package name> 


本 地 安装 的 软件 包 会 被 下 载 到 当前 所 在 目录 (通常 是 当前 项 目的 根 目录 〉 的 node_ 
modules 子 目录 中 ， 适 用 于 安装 一 些 JavaScript 库 和 框架 。 这 些 库 和 框架 会 被 当前 项 目 所 
引用 。 

如 果 使 用 --save 参 数 ，npm 命 令 会 将 软件 包 信 息 写 入 package.json 文 件 的 dependencies 字 
段 中 ， 这 通常 用 于 安装 项 目 运行 所 需要 的 软件 包 。 


npm install <package name> --save 
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如 果 使 用 --save-dev 参 数 ，npm 命 令 会 将 软件 包 信息 写 入 package.json 文 件 的 
devDependencies 字 段 中 。 这 样 的 软件 包 通常 仅 被 用 于 开发 环境 。 


npm install <package name> --save-dev 





在 使 用 npm 安 装 软件 包 时 ， 建 议 使 用 --save 或 --save-dev 参 数 。 


® 建议 在 每 个 项 目的 根 目 录 中 都 创建 一 个 package.json 文 件 。 





例如 当前 项 目 需 要 karma 软 件 包 ，c:\myproj 是 当前 项 目的 根 目录 ， 打 开 命 令 控制 台 ， 
将 当前 目录 切换 到 c:\myproj， 执 行 以 下 命令 : 


C:\>cd c:\myproj 


然后 执行 以 下 命令 (因为 karma 用 于 测试 JavaScript 代 码 ， 属 于 开发 环境 需要 的 软件 
包 ， 所 以 使 用 --save-dev 参 数 ) : 


C:\myproj>npm install karma --save-dev 


安装 完毕 后 会 输出 以 下 信息 : 


C:\myproj>npm install karma --save-dev 
myproj@1.0.0 C:\myproj 
“-- karma@1.3.0 

+-- bluebird@3.4.6 

+-- body-parser@1.15.2 

| +-- bytes@2.4.0 

| +-- content-type@1.0.2 

| +-- debug@2.2.0 

1 == mst0 7 


1 +-- depdel.1.0 


以 上 输出 信息 的 简单 说 明 如 下 : 
@ karma(@1.3.0， 当 前 安装 的 软件 包 ， 版 本 为 1.3.0。 
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@ bluebird@3.4.6，karma 依 赖 的 软件 包 ， 版 本 为 3.4.6。 
@ body-parser@1.15.2，karma 依 赖 的 软件 包 ， 版 本 为 1.15.2。body-parser 依 赖 的 软件 
包 在 这 个 树 状 结构 的 下 一 层 。 
karma 软 件 包 被 安装 在 node_ modules 目 录 下 的 karma 子 目录 中 。 除 karma 目 录 外 ， 还 
有 其 他 依赖 软件 包 的 目录 ， 这 些 都 是 NPM 根 据 软件 包 的 依赖 关系 自动 下 载 的 ， 如 图 2-5 
所 示 。 


》 This PC > System Reserved (C:) > myproj 》 node modules > 


入 


Name Type 
-pusw-uravwct ine rurucy 
二 is-primitive Filefolder 
秦 json3 File folder 
;> karma Filefolder 
kind-of Filefolder 
lodash File folder 
log4js Filefolder 
Iru-cache Filefolder 
media-typer File folder 
图 2-5 node_modules 目 录 
2. 全 局 安装 


全 局 安装 指 的 是 将 软件 包 安装 到 一 个 全 局 安装 目录 中 ， 这 样 各 个 项 目 都 可 以 使 用 这 些 
软件 包 。 一 般 来 说 ， 全 局 安装 适用 于 各 种 Node.js 工 具 。 例 如 npm 本 身 就 是 一 个 全 局 安装 的 
软件 包 ， 所 以 可 以 在 命令 控制 台 里 直接 执行 npm。 

全 局 安装 软件 包 的 命令 是 : 


npm install -g <package name> 


例如 ， 本 书 示例 需要 使 用 gulp 工 具 ， 就 可 以 采用 全 局 安装 的 方式 ， 使 各 个 项 目 都 可 以 
使 用 gulp 工 具 。 具 体 命 令 如 下 : 


npm install -g gulp 


运行 以 上 命令 后 ，gulp 工 具 被 安装 到 目录 {fprefix}\node modules\ 中 。 在 作者 的 计算 
机 上 ，{prefix} 是 C:\Users\vdemouser\AppData\Roamingmpm 目 录 。 以 下 命令 会 显示 当前 
{prefix} 的 值 : 
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npm config get prefix 
全 局 安装 目录 也 可 以 通过 以 下 命令 进行 修改 : 
npm config set prefix=c:\global packages 


修改 全 局 安装 目录 后 ， 软 件 包 会 被 安装 到 ci:\global packagesmode modules。 





中 ， 并 将 旧 目 录 从 PATH 环境 变量 中 删除 。 以 后 就 可 以 在 命令 控制 台中 直接 执 
行 全 局 安装 的 工具 了 。 


9 修改 完全 局 安装 目录 后 ， 请 将 新 的 目录 添加 到 Windows 的 环境 变量 PATH 





2.2.4 列 出 已 安装 的 软件 包 
npm list 命 令 以 树 型 结构 列 出 当前 项 目 安装 的 所 有 软件 包 ， 以 及 它们 依赖 的 软件 包 。 
具体 命令 如 下 : 


npm list 


如 果 加 上 一 个 参数 -g 或 --global 就 可 以 列 出 全 局 安装 的 软件 包 和 它们 依赖 的 软件 包 。 具 
体 命令 如 下 : 


npm list -g 


如 果 不 想 输出 所 依赖 软件 包 的 信息 ， 可 以 添加 --depth 参 数 。 具 体 命 令 如 下 : 


npm list -g --depth=0 


运行 以 上 命令 将 得 到 如 下 结果 : 


C:\>npm list -g --depth=0 
c:\global packages 
+-- gulp@3.9.1 


*-- npme3.10.8 
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2.3 ”代码 编辑 器 ( Visual Studio Code ) 


一 款 好 用 的 编辑 器 能 够 显著 提升 开发 人 员 的 工作 效率 。 本 书 示 例 使 用 的 是 微软 开发 的 
跨 平台 (支持 Windows、Linux 和 Mac OS 操作 系统 ) 开源 代码 编辑 器 Visual Studio Code。 

和 全 功能 的 集成 开发 环境 Visual Studio 不 同 ，Visual Studio Code 的 定位 是 一 个 轻 量 但 
又 功能 强大 的 代码 编辑 器 ， 可 帮助 开发 人 员 进 行 快速 编码 、 编 译 和 调试 。 

Visual Studio Code 来 源 于 微软 的 一 款 使 用 HTML、CSS 和 JavaScript 开 发 的 在 线 编辑 
器 Monaco? (用 于 Visual Studio Online、OneDrive 等 ) ， 在 这 个 基础 上 利用 基于 io.js 和 
Chromium 的 开源 框架 Electron@ 进 行 包装 〈Electron 可 以 让 用 户 使 用 JavaScript 调 用 操作 系统 
的 原生 API 来 创造 跨 平 台 桌 面 应 用 ) ， 成 为 一 款 跨 平 台 的 桌面 代码 编辑 器 。 

作为 代码 编辑 器 ，Visual Studio Code 支 持 多 种 编程 语言 ， 其 中 原生 支持 JavaScript、 
TypeScript、CSS 和 HTML。 开 发 人 员 可 以 通过 VS Code Marketplace9 下 载 扩展 插件 获得 其 
他 编程 语言 的 支持 。 

Visual Studio Code 支 持 调试 。 原 生 调试 功能 限于 Node.js 环 境 ， 可 以 调试 JavaScript、 
TypeScript 和 其 他 能 够 被 转译 为 JavaScript 的 编程 语言 。 其 他 运行 环境 和 编程 语言 〈 例 
如 PHP、Ruby、Go、C#、Python) 的 调试 支持 也 可 以 从 VS Code Marketplace 下 载 扩展 
插件 获得 。 

Visual Studio Code 内 置 了 Git 版 本 控制 功能 ， 支 持 用 户 自 定义 配置 ， 例 如 改变 主题 颜 
色 、 键 盘 快 捷 方 式 、 编 辑 器 属性 等 。 


2.3.1 安装 Visual Studio Code 


安装 Visual Studio Code 的 方法 是 ， 先 从 官网 https://code.visualstudio.com/ 下 载 安装 文件 
包 ， 双 击 VSCodeSetup-stable.exe 启 动 安装 程序 ， 如 图 2-6 所 示 。 

然后 单 击 Next， 按 安装 向 导 指示 使 用 默认 设置 安装 即 可 。 安 装 结束 后 可 以 直接 启动 
Visual Studio Code， 如 图 2-7 所 示 。 





©@® Microsoft. Abrowser based code editor[OL]. [2016]. https://github.com/Microsoft/monaco-editor. 

@) Electron. Build cross platform desktop apps with JavaScript HIML, and CSS[OL]. [2016]. http://electron. 
atom.io. 

@ Microsoft. Extensions for the Visual Studio family of products[OL]. [2016]. https://marketplace.visualstudio. 
com/VSCode. 
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pq Setup - Visual Studio Code 一 X 


Welcome to the Visual Studio 
Code Setup Wizard 
This will install Microsoft Visual Studio Code on your computer, 


Itis recommended that you dose all other applications before 
continuing. 


Click Next to continue, or Cancel to exit Setup, 





Next > Cancel 





图 2-6 Visual Studio Code 安 装 欢 迎 界面 





bd Setup - Visual Studio Code 一 


Completing the Visual Studio Code 
Setup Wizard 


Setup has finished instaling Visual Studio Code on your 
computer, The application may be launched by selecting the 
installed icons. 


Click Finish to exit Setup. 











laundh 











图 2-7 ”Visual Studio Code 安 装 完成 





2.3.2 初 识 Visual Studio Code 


和 Visual Studio 不 同 ，Visual Studio Code 管 理 项 目 没 有 专门 的 项 目 文件 ， 它 是 基于 文 
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件 和 目录 的 。 用 户 可 以 用 Visual Studio Code 打 开 一 个 文件 或 文件 夹 。 
Visual Studio Code 的 工作 界面 有 着 简单 直观 的 布局 ， 提 供 了 最 大 化 的 编辑 空间 ， 同 时 
为 用 户 留 下 足够 的 空间 来 浏览 和 访问 文件 夹 ， 如 图 2-8 所 示 。 


































1 Functlon Player() { 
} 








a Meyer, proratype ,piey = fectiondsong) 
ne this. currentlyPlayingsong ~ song; 
this.isplaying » true; Treat nO 
Plyw pee Fee 6 ); 6 Moye 4 
re ong 
+ 网 player.prototype.p: 和 () 六 
pe aying ~ fa 


able to play 4 Song”, fu 
song); 


ntlyPlayingsong) , 








// dem use of custom matcher 
expect (player). topeplaying(song); 
D; 





this,isplaying » troei 
a 1 describe("when song has been paused", 
beforeEach(function() { 
re seFavorite = function: 2 player.play(song); 
player, 0 


Po ee 





站 





侧 边栏 


图 2-8 Visual Studio Code 界 面 布局 


位 于 工作 界面 最 左边 的 是 视图 栏 ， 可 用 来 在 代码 目录 、 全 局 搜索 、Git、 代 码 调试 和 
扩展 插件 这 5 个 视图 间 切 换 。 

侧 边栏 根据 视图 栏 的 选择 显示 不 同 的 视图 。 例 如 ， 当 用 户 选择 代码 目录 视图 时 ， 侧 边 
栏 显示 资源 管理 器 ， 用 来 浏览 、 打 开 、 管 理 所 有 文件 和 文件 夹 。 

状态 栏 用 于 显示 打开 的 项 目 和 编辑 的 文件 的 相关 信息 。 

用 户 可 以 在 编辑 区 域内 编辑 文件 。Visual Studio Code 同 时 支持 3 个 可 视 编辑 器 ， 可 以 
编辑 或 查看 并 排 在 一 起 的 3 个 文件 。 在 编辑 区 项 部 区 域 ， 每 个 被 打开 的 文件 都 有 对 应 的 选 
项 卡 〈Tabs) 。 

Visual Studio Code 同 样 支持 大 量 键盘 快捷 键 操作 。 使 用 快捷 键 ShifttCtrl+P 调 出 命令 面 


板 ， 在 这 里 可 以 访问 Visual Studio Code 所 有 的 功能 ， 


所 示 。 





|> 





Change End of Line Sequence 
Change File Encoding 

Change Language Mode 

Clear Editor History 

Close Notification Messages 
Close Window 

Configure Language 

Debug: Add Function Breakpoint 
Debug: Clear Console 

Debug: Continue 

Debug: Disable All Breakpoints 
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包含 最 常见 的 快捷 键 操作 ， 如 图 2-9 


Ctrli+kK M 


Escape, Shift+Escape 
Ctrl+Shift+W Ctri+W 


F5 





图 2-9 Visual Studio Code 命 令 面板 


单元 测试 篇 


第 3 章 
第 4 章 
第 5 章 
第 6 章 
第 7 章 


单元 测试 概论 

深入 Jasmine 单 元 测试 
单元 测试 执行 工具 Karma 
AngularJS 应 用 的 单元 测试 
代码 覆盖 率 


第 3 音 
单元 测试 概论 
人 


在 软件 设计 领域 中 有 很 多 种 测试 ， 单 元 测试 是 其 中 一 种 ， 也 是 最 基本 的 一 种 测试 。 单 
元 测试 能 够 从 缺陷 的 源头 找 出 软件 中 潜在 的 问题 ， 它 是 保证 软件 质量 的 重要 手段 。 
本 章 将 介绍 : 
@ 单元 测试 的 特性 
单元 测试 的 重要 性 
测试 金字 塔 
测试 先行 《Test-First) 


® 
® 
® 
@ Web 前 端 测 试 框 架 


3.1 单元 测试 的 特性 


单元 测试 代码 通常 由 软件 开发 人 员 编 写 。 单 元 测试 是 针对 软件 设计 的 最 小 单位 进行 检 
查 和 验证 的 工作 ， 它 有 以 下 一 些 特性 : 

@ 用 代码 测试 代码 。 单 元 测试 通常 是 一 段 测 试 代 码 ， 这 段 代 码 调用 被 测试 的 程序 单 
元 ， 然 后 对 这 个 程序 单元 的 单个 最 终结 果 的 某 些 假设 进行 检验 。 这 个 过 程 无 须 人 
工 干预 ， 如 图 3-1 所 示 。 

@ 单元 测试 本 身 是 代码 ， 可 重复 自动 运行 。 

@@ 单元 测试 针对 程序 单元 ， 只 需要 考虑 有 限 的 几 个 情况 ， 编 写 测试 用 例 通常 比较 简单 。 

@ 单元 测试 应 该 易于 安装 及 运行 ， 它 不 需要 进行 烦琐 的 配置 (程序 单元 已 被 隔离 ， 
它 所 依赖 的 部 分 已 经 被 测试 替身 代替 ) 。 如 果 单 元 测试 需要 访问 数据 库 、 网 络 
等 ， 这 个 测试 就 不 是 真正 的 单元 测试 。 
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单元 测试 (代码 ) 











S| 


行 ) 
(断言 





Act ( 执 和 


IAssert 














图 3-1 ”单元 测试 一 一 代码 测试 代码 
单元 测试 的 时 间 应 该 非常 短 。 通 常 来 说 ， 开 发 人 员 每 修改 一 次 程序 就 会 进行 至 少 
一 次 单元 测试 ， 高 效 的 单元 测试 可 以 向 开发 人 员 快 速 反馈 信息 。 
在 编写 程序 的 过 程 中 通常 会 进行 多 次 单元 测试 ， 所 以 单元 测试 在 软件 开发 过 程 的 
早期 就 能 发 现 问题 。 
单元 测试 一 般 粒 度 较 小 ， 因 此 发 现 了 问题 ， 可 以 快速 定位 并 修复 错误 。 
良好 设计 的 单元 测试 可 以 覆盖 程序 单元 分 支 和 循环 条 件 的 所 有 路 径 。 


3.2 ”单元 测试 的 重要 性 


激烈 的 商业 竞争 、 飞 速 发 展 的 新 兴 技 术 使 得 企业 需要 比 以 往 更 快速 地 交付 高 质量 的 软 
件 。 因 为 项 目 工期 紧 ， 任 务 重 ， 很 多 开发 人 员 会 把 主要 时 间 用 在 编写 业务 逻辑 代码 上 ， 有 
时 间 的 时 候 才 会 写 一 些 简单 的 单元 测试 代码 ， 甚 至 不 写 单元 测试 。 理 由 如 下 : 

@ 没 时 间 写 单元 测试 。 

@ 单元 测试 并 不 能 防止 漏洞 的 出 现 。 

@ 这 段 代 码 很 简单 ， 为 什么 还 要 写 单 元 测试 ? 

其 实 ， 不 写 单元 测试 的 根本 原因 还 是 很 多 开发 人 员 不 了 解 单元 测试 所 能 带 来 的 好 处 ， 
所 以 才 会 认为 写 单元 测试 是 浪费 时 间 ， 不 去 写 单元 测试 。 

这 里 引用 JTimothy King“ 关 于 单元 测试 的 十 二 个 好 处 ”®。 


四 ITimothy King. Twelve Benefits of Writing Unit Tests First[OL]. 2006. http://sd.jtimothyking. 
com/2006/07/11/twelve-benefits-of-writing-unit-tests-first. 
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1) 单元 测试 可 以 证 明 你 的 代码 真能 解决 问题 

这 意味 着 缺陷 减少 。 单 元 测试 当然 不 能 取代 系统 测试 和 验收 测试 ， 但 能 补足 它们 的 
短处 。 

2) 可 以 获得 一 组 底层 回归 测试 

开发 人 员 可 以 随时 检查 程序 不 工作 的 部 分 和 发 现 缺 陷 所 在 位 置 。 很 多 团队 会 每 天 运行 
整 组 单元 测试 ， 这 样 可 以 在 交付 程序 给 质 管 部 门 之 前 及 早 发 现 缺 陷 。 

3) 可 以 在 不 破坏 现 有 功能 的 基础 上 持续 改进 设计 

一 旦 有 了 单元 测试 ， 开 发 人 员 就 可 以 很 方便 地 重 构 代码 。 只 要 在 重 构 以 后 重新 运行 单 
元 测试 就 可 以 知道 是 不 是 破坏 了 现 有 功能 。 

4) 边 写 单元 测试 边 写 代码 是 更 有 趣 的 工作 方式 

通过 编写 单元 测试 ， 开 发 人 员 能 更 好 地 理解 代码 需要 实现 的 功能 。 在 实际 系统 没有 完 
成 的 情况 下 ， 可 以 通过 单元 测试 运行 编写 的 代码 。 代 码 的 成 功 运行 会 给 开发 人 员 带 来 成 就 
感 ， 激 励 他 们 去 完成 后 面 更 多 的 工作 。 

5) 可 以 真实 地 反映 开发 进度 

因为 代码 可 以 在 实际 系统 没有 完成 的 情况 下 运行 〈 在 单元 测试 的 帮助 下 ) ， 所 以 开发 
人 员 可 以 随时 展示 他 们 的 进度 。 而 且 ， 因 为 有 单元 测试 ， 所 谓 的 “编码 完成 ”不 仅仅 是 写 
完 代码 ， 签 入 代码 库 ， 还 能 够 无 缺陷 地 运行 。 

6) 单元 测试 是 一 种 使 用 范例 

我 们 都 碰 到 过 那 种 不 知道 该 怎么 用 的 函数 或 类 ， 这 种 情况 下 一 般 会 先 去 找 范例 代码 ， 
但 是 通常 内 部 使 用 的 代码 不 会 有 范例 。 幸 运 的 是 单元 测试 可 以 作为 一 种 文档 ， 当 不 知道 某 
个 函数 怎么 使 用 时 ， 看 一 下 单元 测试 代码 怎么 写 即 可 。 

7) 促使 号 代码 前 先 做 规划 

先 写 测试 〈 后 写 代 码 ) 会 促使 开发 人 员 在 动手 开发 前 把 必须 完成 的 事 和 整体 设计 考虑 
一 遍 。 这 不 但 会 让 他 们 更 专注 ， 还 能 让 设计 更 漂亮 。〈 本 章 后 面 会 介绍 测试 驱动 开发 的 相 
关内 容 ) 

8) 降低 缺陷 修复 成 本 

缺陷 发 现 得 越 早 越 容 易 修 复 。 发 现 得 晚 的 缺陷 通常 是 好 几 处 代码 变动 引发 的 结果 ， 而 
且 往往 不 知道 究竟 是 由 哪个 变动 造成 的 ， 这 使 得 修复 缺陷 变 得 相当 困难 。 单 元 测试 能 帮助 
开发 人 员 及 早 发 现 缺陷 。 

9) 单元 测试 甚至 比 代码 审查 的 效果 还 要 好 

有 人 说 事前 代码 审查 比 事后 测试 更 好 ， 因 为 发 现 和 修复 缺陷 的 成 本 更 低 。 如 果 代码 发 
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布 后 才 去 修复 缺陷 ， 成 本 就 高 得 多 。 而 单元 测试 能 够 比 代码 审查 更 早 地 发 现 缺陷 。 

10) 无 形 中 为 开发 人 员 消除 了 工作 上 的 障碍 

开发 人 员 在 编码 时 可 能 会 碰 到 无 法 继续 工作 的 障碍 。 单 元 测试 能 够 系统 化 代码 结构 ， 
帮助 开发 人 员 将 注意 力 集中 到 创造 新 功能 上 。 他 们 可 能 卡 在 不 知道 如 何 测试 下 一 段 代码 ， 
或 者 不 知道 如 何 让 测试 通过 ， 但 他 们 永远 知道 下 一 步 该 做 什么 。 有 时 候 你 很 想 在 累 倒 之 前 
休息 一 下 ， 但 是 因为 工作 进行 得 很 顺 ， 使 得 你 根本 不 想 停 下 来 。 

11) 单元 测试 促成 更 好 的 设计 

为 了 测试 一 段 代码 ， 开 发 人 员 需 要 清晰 地 定义 代码 的 功能 。 如 果 代 码 测 起 来 很 简单 ， 
这 表示 这 段 代 码 功能 清晰 ， 具 有 很 高 的 聚合 度 。 如 果 代码 能 通过 单元 测试 ， 说 明 它 很 容易 
被 整合 到 实际 系统 中 ， 和 周边 代码 具有 松 耦 合 的 依赖 关系 。 高 内 聚 和 松 耦 合 往往 是 优秀 设 
计 的 标志 。 同 时 容易 通过 单元 测试 的 代码 也 容易 维护 。 

12) 编写 单元 测试 会 使 开发 效率 更 高 

编写 单元 测试 会 使 开发 效率 更 高 。 换 句 话 说， 忽略 单元 测试 也 许 能 更 快 完成 编码 ， 但 
是 无 法 保证 代码 能 真正 工作 ， 以 后 开发 人 员 可 能 不 得 不 花费 大 量 精 力 去 修复 代码 缺陷 。 而 
单元 测试 能 够 从 源头 发 现 问题 ， 快 速 修 复 缺 陷 。 

综 上 记述， 单元 测试 很 重要 ， 和 写 功 能 代码 一 样 重要 。 


3.3 ”测试 金字 塔 


传统 的 软件 测试 流程 一 般 是 先 在 软件 开发 过 程 中 进行 少量 的 单元 测试 ， 然 后 在 整个 软 
件 开发 结束 阶段 ， 集 中 进行 大 量 的 测试 ， 包 括 集成 测试 和 端 到 端 测试 。 随 着 软件 项 目 越 来 
越 复杂 ， 大 量 的 错误 往往 只 有 到 了 项 目 后 期 端 到 端 测试 时 才能 够 被 发 现 ， 项 目 进度 和 项 目 
风险 难以 控制 。 错 误 发 现 得 越 晚 ， 错 误 修复 成 本 越 高。 错误 的 延迟 解决 必然 导致 整个 项 目 
成 本 的 急剧 增加 。 

为 此 需要 改变 测试 方法 ， 在 各 种 测试 之 间 找 到 正确 的 平衡 ， 把 时 间 用 在 正确 的 测试 活 
动 中 ， 尽 可 能 避免 上 述 问题 ， 这 就 是 测试 金字 塔 。 

测试 金字 塔 的 概念 来 自 Mike Cohn， 在 Succeeding With 4gile 一 书 中 有 详细 描述 ， 其 核 
心 观念 是 底层 单元 测试 应 多 于 依赖 UI 的 高 层 端 到 端 测试 ， 如 图 3-2 所 示 。 
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端 到 端 


集成 测试 


/ wen NN 


图 3-2 ”测试 金字 塔 

在 测试 金字 塔 中 ， 从 上 往 下 ， 成 本 越 来 越 低 ， 效 率 越 来 越 高 ， 更 贴近 技术 实现 ， 从 下 
往 上 ， 则 成 本 越 来 越 高 ， 效 率 越 来 越 低 ， 但 更 接近 真实 业务 需求 。 测 试 金 字 塔 理论 强调 建 
立 一 个 合理 的 测试 组 合 ， 尽 可 能 使 用 大 量 低 成 本 的 单元 测试 , 辅 之 以 少量 高 成 本 但 更 接近 
业务 的 UI 端 到 端 测试 。 

Martin Fowler 在 他 的 博客 中 对 测试 金字 塔 进行 了 如 下 的 解释 ?: 

“特别 地 ， 我 始终 认为 高 层 测试 只 是 测试 防护 体系 的 第 二 防线 。 如 果 一 个 高 层 测试 失 
败 了 ， 不 仅仅 表明 功能 代码 中 存在 缺陷 ， 还 意味 着 单元 测试 的 欠缺 。 因 此 ， 无 论 何 时 修复 
失败 的 端 到 端 测试 ， 都 应 该 同时 添加 相应 的 单元 测试 。” 

通常 在 一 个 测试 组 合 中 ，Google 测 试 团队 建议 采用 70/20/10 划 分 8， 70% 单 元 测试 ， 
20% 集 成 测试 和 10% 端 到 端 测试 。 实 际 比例 在 各 个 团队 中 会 有 不 同 ， 但 一 般 来 说 ， 会 保留 
金字 塔 的 形状 ， 而 尽量 避免 相反 的 倒 金字 塔 模式 。 








3.4 测试 先行 (Test-First ) 


尽早 发 现 软件 缺陷 ， 并 采取 合理 的 应 对 策略 ， 可 以 降低 整个 软件 的 开发 成 本 。 如 果 
在 进行 软件 开发 时 能 够 首先 编写 测试 代码 〈Test-First) ， 也 就 是 说 在 明确 要 开发 某 个 功能 
后 ， 首 先 思考 如 何 对 这 个 功能 进行 测试 ， 并 完成 测试 代码 的 编写 ， 然 后 编写 相关 的 功能 代 
码 满足 这 些 测试 用 例 ， 那 么 就 会 迫使 开发 人 员 从 易 用 性 、 易 测试 性 的 角度 考虑 问题 ， 从 而 
定义 出 清晰 的 、 明 确 反 映 意 图 的 模块 接口 来 。 另 外 ， 为 了 使 得 测试 能 够 通过 ， 开 发 人 员 就 





@® MartinFowler. TestPyramid[OL]. 2012. http://martinfowler.com/bliki/TestPyramid.html. 
@ Mike Wacker. Just Say No to More End-to-End Tests[OL]. 2015. https://testing.googleblog.com/2015/04/ 


Just-say-no-to-more-end-to-end-tests.html. 


第 3 章 单元 测试 概论 | 39 | 


会 主动 把 那些 难以 测试 的 耦合 〈 依 赖 关 系 ) 去 掉 。 这 样 不 仅仅 是 获得 了 可 测试 性 ， 而 且 也 
产生 了 更 好 的 设计 和 系统 架构 。 


3.4.1 测试 驱动 开发 (Test-Driven Development ) 


Test-Driven Development (TDD) 是 一 种 一 切 软件 开发 活动 都 要 从 首先 编写 测试 代码 
开始 的 软件 开发 过 程 的 应 用 方法 ， 是 敏捷 软件 开发 的 推荐 做 法 。 

TDD 的 基本 思路 就 是 通过 测试 来 推动 整个 开发 的 进程 ， 如 图 3-3 所 示 ， 有 3 个 步骤 : 

(1) 在 写 功能 代码 前 ， 先 用 测试 用 例 将 功能 需求 描述 出 来 。 因 为 此 时 还 没有 功能 实 
现代 码 ， 所 以 执行 测试 用 例 失 败 。 很 多 软件 界面 会 用 红色 信息 表示 测试 失败 〈 红 灯 ) 。 

(2) 编写 功能 代码 ， 使 前 面 失败 的 测试 用 例 通 过 。 很 多 软件 界面 会 用 绿色 信息 表示 
测试 通过 〈 绿 灯 ) 。 

(3) 重 构 功能 代码 ， 改 善 设计 。 






































































































































| | | | l | 
| 测试 测试 测试 || 测试 | 
| | | | ' | 
| 和 而 本 
| | “| 编码 | | | 编码 | 
| 站 > I | 
[ee | | | 
| 测试 | 测试 ' | 测试 | 测试 || 测试 1 测试 | 测试 || 测试 | 
| | | | 1 | 
二 | 国 时 | Pe 
1| 编码 || 编码 | “| 编码 | 编码 1 | 编码 || 编码 || 编码 | 
| | | | 1 | 
| RE ds 有 WRT 0 1 


图 3-3 ”测试 驱动 开发 

重复 这 些 步 又: 红 灯 测试 失败 )、 绿 灯 测试 通过 ) 、 重 构 ， 直 至 全 部 功能 完成 。 
因为 在 编写 测试 用 例 时 ， 已 经 对 其 功能 的 分 解 、 使 用 过 程 、 接 口 都 进行 了 设计 ， 从 
而 将 单元 测试 变 成 了 设计 过 程 的 一 部 分 ， 同 时 也 展示 了 功能 代码 是 如 何 工作 的 。 一 定 程度 
上 ， 测 试用 例 变 成 了 功能 代码 的 使 用 文档 ， 实 现 “ 代 码 即 文档 ”的 思想 。 

当然 TDD 最 重要 的 功能 还 在 于 保障 代码 的 正确 性 ， 能 够 迅速 发 现 、 定 位 问题 所 在 。 理 
论 上 使 用 TDD 永 远 不 会 有 未 被 测试 的 代码 ， 这 也 给 开发 人 员 重 构 现 有 代码 和 对 应 用 进行 回 
归 测试 (Regression Test) 提供 了 信心 和 保障 。 特 别 是 在 程序 修改 比较 频繁 时 ， 由 于 测试 
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用 例 已 经 完成 ， 测 试 期 望 的 结果 也 是 完全 可 以 预料 的 。 


3.4.2 行为 驱动 开发 (Behavior-Driven Development ) 


Behavior-Driven Development (BDD) 是 在 TDD 的 基础 上 发 展 而 来 的 一 种 敏捷 软件 开 
发 的 方法 。BDD 最 初 是 由 Dan North 在 2003 年 命名 ， 它 鼓励 软件 项 目的 开发 人 员 、 测 试 人 
员 和 非 技 术 人 员 或 商业 参与 者 之 间 的 协作 。 

BDD 作 为 一 种 设计 方法 ， 本 身 不 是 关于 测试 的 ， 它 的 重点 是 客户 和 技术 人 员 使 用 几乎 
近 于 自然 语言 的 方式 〈 通 用 语言 ) 描述 系统 的 行为 和 预期 的 结果 。 软 件 开发 中 表达 不 一 臻 
是 最 常见 的 问题 ， 造 成 的 后 果 就 是 开发 人 员 最 终 做 出 来 的 产品 不 是 客户 期 望 的 。 如 果 客 户 
〈 非 技术 人 员 ) 和 技术 人 员 使 用 同一 种 “语言 ”来 描述 同一 个 系统 ， 则 可 以 最 大 程度 避免 
表达 不 一 致 带 来 的 问题 ， 从 而 做 出 符合 客户 需求 的 设计 。 

但 是 如 果 光 有 设计 ， 没 有 验证 的 手段 ， 就 无 法 检验 实现 是 不 是 符合 设计 ， 因 此 BDD 还 
是 要 和 测试 结合 在 一 起 的 。 当 使 用 通用 语言 来 描述 测试 时 ， 可 以 让 任何 人 更 容易 地 了 解 被 
测试 的 内 容 。 例 如 ， 使 用 “如 果 银 行 账户 被 透支 ， 就 不 能 取款 ”这 样 的 描述 ， 而 不 是 写 一 
个 名 为 testOverdrawnAccount 的 测试 。 

BDD 使 用 用 户 故 事 (user story) 来 描述 需求 。 用 户 故 事 通常 遵循 特定 的 模板 形式 ; 


As a [人 /角色 ] 
I_ want [特征 /功能 ] 
so that [结果 /利益 ] 


作为 一 个 [人 /角色 ]， 我 需要 [ 某 些 特征 和 功能 ]， 以 便 能 得 到 [相应 的 利益 或 结果 ]。 
同样 的 一 个 故事 ， 可 能 会 有 不 同 的 场景 。 利 用 以 上 的 模板 描述 故事 之 后 ， 可 以 再 通过 
以 下 的 模板 对 不 同 场景 进行 描述 : 


Scenario :标题 ( 描述 场景 的 单行 文字 ) 
Given [上 下 文 ] 
Rnd [更 多 上 下 文 ] 
When [事件 ] 
Then [结果 ] 
And [更 多 结果 ] 


以 一 个 经 典 的 ATM 取 款 机 为 例 ”"， 故 事 可 以 描述 为 : 


Story: 银行 账户 持 有 人 提取 现金 
Rs a [银行 账户 持 有 人 ] 

I want [从 ATM 机 提取 现金 ] 

so that [不 需要 在 银行 柜台 排队 ] 


同样 的 故事 ， 会 有 不 同 的 场景 发 生 : 


Scenario 1: 银行 账户 有 足够 资金 
Given 银行 账户 有 足够 资金 
Rnd 有 效 的 银行 卡 
Rnd 提 款 机 有 足够 的 现金 
When 账户 持 有 人 要 求 取款 
Then 银行 账户 余额 应 该 被 扣除 
And 提 款 机 应 该 分 发 现金 
Rnd 应 该 退还 银行 卡 


如 果 银 行 账户 持 有 人 取款 的 金额 比 他 的 存款 还 多 : 


Scenario 2: 银行 账户 透支 超过 上 限 
Given 银行 账户 已 透支 
Rnd 有 效 的 银行 卡 
When 账户 持 有 人 要 求 取款 
Then 应 该 显示 拒绝 取款 的 消息 
And 提 款 机 应 该 拒绝 分 发 现金 
Rnd 应 该 退还 银行 卡 
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如 果 仔 细 观 察 ， 就 会 发 现 Given-When-Then 其 实 定义 了 一 个 完整 的 测试 ， 如 图 3-4 


所 示 。 


个 DanNorth. Introducing BDD[OL]. 2006. https://dannorth.net/introducing-bdd. 
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[说 | 准备 要 测试 的 对 象 和 测试 环境 | 
Given 


说 | 调用 要 测试 的 业务 方法 | 
When 
对 测试 结果 进行 验证 | 


图 3-4 Given-When-Then 


下 一 章 介绍 的 Jasmine 就 是 一 种 BDD 风 格 的 JavaScript 测 试 框架 。 

















3.5 Web 前端 测试 框架 


工 欲 善 其 事 ， 必 先 利 其 器 。 编 写 单元 测试 代码 之 前 ， 需 要 选择 一 个 测试 框架 。 测 试 框 
架 是 一 组 测试 自动 化 的 规范 、 基 础 代码 、 测 试 思想 的 集合 ， 用 于 组 织 、 管 理 和 执行 那些 独 
立 的 测试 用 例 。 同 时 ， 测 试 框架 也 提供 很 多 方便 易 用 的 辅助 性 工具 。 使 用 测试 框架 可 以 减 
少 兄 余 代码 ， 提 高 代码 的 生产 率 、 重 用 性 和 可 维护 性 。 

Web 前 端 JavaScript 的 测试 框架 有 很 多 。2012 年 Google Chrome 团 队 的 工程 师 Addy 
Osmani 曾 经 在 Twitter 上 做 了 一 次 非 正式 的 调研 ， 询 问 他 的 粉丝 最 常用 的 JavaScript 测 试 框 
架 。 其 调研 结果 是 9: 

(1) Jasmine 

(2) QUnit 

(3) Mocha + Chai 

(4) BusterJS 

(5) jsTestDriver 
(6) CasperJS 

目前 ，Jasmine 仍 然 是 最 流行 的 JavaScript 测 试 框架 之 一 。 表 3-1 所 示 为 Jasmine 和 另外 一 

个 主流 JavaScript 测 试 框架 Mocha 做 的 简单 比较 。 


个 Addy Osmani. What JavaScript testing framework do you use the most often?[OL]. 2012. http://bit.ly/ 
JSTestingSurvey. 
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表 3-1 Jasmine 和 Mocha 简 单 比较 





Jasmine | Mocha 





相同 点 


两 者 既 可 以 在 浏览 器 里 使 用 ， 也 可 以 在 Nodejs 环 境 里 使 用 ; 

都 是 BDD 风 格 的 测试 框架 ， 语 法 清晰 易 读 ; 

有 相似 的 API。 例 如 ， 使 用 describe 函 数 定义 测试 套件 (test suite》， 使 用 it 函 数 定义 测试 用 
例 (test case) 





不 同 点 











Jasmine 是 完整 的 测试 框架 ， 自 带 断 言 |Mocha 自 身 不 提供 断言 库 和 测试 蔡 身 库 ; 
(assertion) 库 和 测试 替身 (test double) | Mocha 中 可 以 使 用 第 三 方 断言 库 ， 通 常 选 择 
库 ， 无 须 添加 其 他 依赖 ; Chai; 
Jasmine 没 有 测试 执行 器 (test runner) 。 需 | Mocha 中 可 以 使 用 第 三 方 测试 替身 库 ， 通 常 选 
要 第 三 方 测试 执行 器 ， 例 如 Karma 择 Sinon.JS; 

Mocha 本 身 自 带 测试 执行 器 ， 也 可 以 使 用 


Karma 





本 书 第 4 章 将 深入 介绍 基于 Jasmine 的 Web 前 端 单元 测试 。 


第 4 章 


深入 Jasmine 单 元 测试 


A 


Jasmine 是 什么 ? Jasmine 的 作者 Davis Frank 是 这 样 描述 的 ?: 
“Jasmine 是 一 个 JavaScript 测 试 框 架 ， 目 的 是 将 BDD 风 格 引入 JavaScript 测 试 之 中 。 至 


于 区 别 嘛 ， 我 们 的 目标 是 BDD( 相 比 标准 的 TDD》〉， 


因此 我 们 尽力 帮助 开发 人 员 编 写 比 





一 般 xUnit 框 架 表达 性 更 强 ， 组 织 更 好 的 代码 。 此 外 我 们 还 力图 减少 依赖 ， 这 样 你 可 以 在 
Nodejs 上 使 用 Jasmine， 也 可 以 在 浏览 器 或 移动 程序 中 使 用 。” 


本 章 将 介绍 : 

9 初 识 Jasmine 

@ 组 织 测试 用 例 

@ 创建 单元 测试 

@ Jasmine 的 断言 

@ 测试 蔡 身 (Test Double) 
@ 测试 异步 代码 

@ Jasmine 插 件 

@ 基于 浏览 器 调试 


4.1 初 识 Jasmine 


4.1.1 获取 Jasmine 


访问 Jasmine 的 发 布 网 址 https://github.com/jasmine/jasmine/releases 并 下 载 它 的 zip 独 


个 Dio Synodinos. Virtual Panel: State of the Art in JavaScript Unit Testing[OL]. 2011. https:/www.infoq.com/ 


articles/Javascript-unit-testing. 
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立 发 布 包 ， 如 图 4-1 所 示 〈( 本 书 编写 时 Jasmine 的 最 新 版 本 是 2.5.2，jasmine-standalone- 
2.52zip) 。 


EE 52 


因 slackersoft released this on Sep 17 -25 commits to master since this release 





© 6816bc4 


Please see the release notes 


Downloads 


四 jasmine-standalone-2.5.2zip 
四 source code (zip) 


四 Source code (tar.gz) 
图 4-1 下 载 Jasmine 发 布 包 
将 zip 文 件 解压 ， 得 到 如 图 4-2 所 示 的 目录 结构 。 


入 
Name Type 
lib File folder 
spec Filefolder 
STC Filefolder 
MIT.LICENSE LICENSE File 
® SpecRunner.html HTML File 


图 4-2 ”Jasmine 独立 发 布 包 目录 
双击 SpecRunner.html， 在 浏览 器 里 会 看 到 如 图 4-3 所 示 的 结果 。 


Oresmine 2 


finished in 0.011is 





Player 
should be able to play a Song 


when song has been paused 
should indicate that the song is currentily paused 
should be possible to resume 


tells the current song if the User has made it a favorite 


#resume 
should throw an exception if song is already playing 


图 4-3 ”双击 SpecRunner.html 显 示 的 结果 


这 是 Jasmine 发 布 包 里 附带 的 单元 测试 示例 的 运行 结果 。 在 解释 什么 是 SpecRunner.html 
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文件 之 前 ， 读 者 应 先 了 解 一 下 针对 前 端 JavaScript 应 用 进行 单元 测试 的 基本 方法 。 
4.1.2 前 端 单元 测试 架构 

通常 ， 前 端 JavaScript 单 元 测试 需要 准备 以 下 文件 ， 如 表 4-1 所 示 。 


表 4-1 ” JavaScript 单元 测试 所 需 文件 
| 文 件 名 | 描述 








app:js 被 测试 的 JavaScript 应 用 (System under Test， 缩 写 SUT) 


| 


app.test.js 编写 的 测试 用 例 





, 测试 执行 页 面 ， 引 用 了 被 测试 的 应 用 app.js、 所 有 的 依赖 文件 、 测 试 框架 
ee testFramework.js 和 测试 用 例 app.test.js 


如 图 4-4 所 示 ， 使 用 不 同 的 浏览 器 加 载 index.test.html， 执 行 测 试用 例 ， 最 后 输出 不 同 
格式 的 测试 结果 。 


念 index.test.html 
appjs 
mm testFrameworkjs 
候 @@ 


app.testjs 
图 4-4 JavaScript 单 元 测试 基本 方法 























4.1.3 Jasmine 测 试 框架 类 库 


在 Jasmine 的 发 布 包 里 ，src 目 录 是 被 测试 的 JavaScript 代 码 ， 示 例 包 含 了 两 个 文件 一 一 
Playerjs 和 Songjs， 如 下 所 示 。 


RE 
+-- Player.js 


+-- Song.js 


在 BDD 里 测试 〈test) 描述 了 用 户 的 需求 ， 也 是 一 个 程序 规格 〈spec) 。 如 果 编 写 
的 应 用 代码 通过 测试 ， 那 么 意味 着 应 用 代码 满足 了 用 户 需 求 ， 所 以 Jasmine 里 test 被 称 为 
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spec。Jasmine 的 分 发 包 里 spec 目 录 包 含 着 两 个 测试 相关 的 文件 : PlayerSpec.js 和 SpecHelper. 
js， 如 下 所 示 。 
-- spec 
+-- PlayerSpec.js 


+-- SpecHelper.js 


lib 目 录 里 是 Jasmine 的 测试 框架 类 库 ， 类 库 文 件 的 描述 如 表 4-2 所 示 。 
表 4-2 ”Jasmine 测 试 框架 类 库 








文 件 名 
bootjs 
console.js 
jasmine.css 
jasmine.js 
jasmine favicon.png 
jsmine-hmljs 


最 后 ，SpecRunnerhtml 就 是 测试 的 执行 页 面 (相当 于 图 4-4 的 index.testhtml) 。 使 用 
任意 文本 编辑 器 打开 这 个 文件 ， 可 以 看 到 这 个 页 面 其 实 是 一 个 容器 ， 引 用 了 测试 需要 的 所 
有 依赖 文件 ， 如 图 4-5 所 示 。 


<IDOCTYPE heml> 
<htnl> 
3 -<head> 
4 ‘<meta charset="utf-8"> 
5 <title7]Jasmine Spec Runner v2.5.2¢</title> 


6 
界面 样式 < <link rel="shortcut icon” type="inege/png” href="lib/iasmine-2.5,.2/iasmine favicon, ang"> 
8 <link rel="stylesheet” href="lib/iasnine-2,5,.2/iasmine.c22"> 
9 核心 类 库 
19 《Script src="lib/iasmine-2,.5,.2/iasmine,.is">¢/script> 
11 《Script src="lib/iasmine-2.5.2/iasming-hte}, is"></script> 
12 《Script srec="lib/iasmine-2.5,.2/boot, 1s">¢/script> 
13 结果 输出 
被 测 代码 入 1 <l-- include source files here... ~-> 
本 <script srcsrsrcLPJayer js">c1script> 


16 <seript srcs"src/Song.is"><¢/script> 


17 

18 <1-- include spec files here... --> 

19 <script src="spec/SoecHeloer. is">¢/script> 

2 《Script src="spec/PlayerSsoec,. js">¢/script> 测试 用 例 
22 -</head> 

23 

24 <body> 

25 《</body> 


26 -</html> 


图 4-5 SpecRunner.html 
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双击 这 个 页 面 ， 会 使 用 操作 系统 的 默认 浏览 器 加 载 这 个 页 面 并 执行 页 面 里 引用 的 
JavaScript 代 码 ， 这 些 代码 准备 单元 测试 场景 ， 执 行 测试 用 例 ， 并 将 结果 以 HTML 格 式 输出 
Cjasmine-html.js) ， 这 就 是 图 4-3 所 示 的 结果 。 也 可 以 使 用 其 他 浏览 器 加 载 这 个 页 面 ， 这 
样 测试 用 例 就 可 以 在 不 同 的 浏览 器 环境 下 执行 ， 完 成 单元 测试 。 

如 果 打 开 测 试用 例文 件 PlayerSpec.js， 如 图 4-6 所 示 ， 会 看 到 有 describe、beforeEach、 
it 等 函数 ， 它 们 是 什么 意思 呢 ? 下 一 节 详 细 介 绍 。 


describe("Player"，function() { 
var player; 
var song; 


beforeEach(function() { 
player = new Player(); 
song = new Song(); 


D); 
19 it("should be able to play a Song”, function() { 
11 player .play(song); 
12 expect(player.currentlyPlayingSong).toEqual(song); 
13 
1 //demonstrates use of custom matcher 
15 expect(player).toBePlaying(song); 
16 DD); 
1 


图 4-6 PlayerSpec.js 


4.2 组 织 测 试用 例 


Jasmine 使 用 describe、it 等 全 局 函数 组 织 测试 用 例 。 


4.2.1 describe 


describe 是 Jasmine 的 全 局 函数 ， 用 于 创建 一 个 测试 套件 (test suite) 。 测 试 套件 可 以 理 
解 为 一 组 测试 用 例 (test case 或 spec) 的 集合 。 

describe 函 数 接受 两 个 参数 (一 个 字符 串 和 一 个 回调 函数 ) 。 字 符 串 参数 是 这 个 测试 
套件 的 名 字 或 标题 (通常 描述 被 测试 内 容 ) ， 回 调 函数 是 实现 测试 套件 的 代码 块 〈 称 为 
describe 块 》。 示 例 代码 如 下 : 
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describe ('Player', function() { 


1 tests *#/ 


describe 函 数 可 以 嵌 套 使 用 (测试 套件 可 以 包含 测试 套件 ) ， 例 如 : 


describe('Player', function() { 
describe('when new', function() { 


/* tests */ 


4.2.2 it 


it 也 是 Jasmine 的 全 局 函数 ， 用 来 在 describe 块 里 创建 一 个 测试 用 例 (spec) 。 和 
describe 一 样 ，it 接 受 两 个 参数 (一 个 字符 串 和 一 个 回调 函数 ) ， 字 符 串 参数 是 测试 用 例 的 
名 字 或 标题 ， 回 调 函数 是 实现 测试 用 例 的 代码 块 〈 称 为 it 块 ) 。 示 例 代 码 如 下 ; 


describe('Player', function() { 
it('should be able to play a Song', function() { 
/* code and assertions */ 
Ds 
it('should be able to pause a Song', function() { 


/* code and assertions */ 


describe 和 it 函数 的 字符 串 参 数 很 重要 。describe 创 建 的 测试 套件 用 来 组 织 多 个 相关 的 
测试 用 例 。 通 过 拼接 测试 套件 的 名 字 和 测试 用 例 的 名 字 ， 可 以 完整 描述 一 个 测试 场景 ， 方 
便 在 大 型 项 目 中 进行 查找 。 如 果 描 述 得 当 的 话 ， 你 的 测试 可 以 以 自然 语言 的 方式 表达 出 
来 ， 形 成 文档 。 

describe 块 和 it 块 都 是 JavaScript 函 数 ， 所 以 JavaScript 的 作用 域 (scope) 规则 也 适用 于 


| 50 | Web 前 端 测试 与 集成 一 一 Jasmine/Selenium/Protractor/Jenkins 的 最 佳 实践 


此 处 。 在 describe 块 里 声明 的 变量 可 以 被 它 内 部 任何 it 块 使 用 。 


describe ('Player', function() { 
Var a; 
it('and so is a spec', function() { 


a = rueF 


4.2.3 ”安装 和 拆 逢 


在 真正 执行 测试 代码 之 前 ， 通 常 需要 做 大 量 的 铺垫 ， 例 如 准备 一 些 测试 数据 ， 建 
立 测试 场景 ， 这 些 为 了 成 功 测试 而 做 的 准备 工作 称 为 Test Fixture。 测 试 完毕 后 需要 释放 
运行 测试 占用 的 资源 。 这 些 铺垫 工作 占据 的 代码 可 能 随 着 测试 复杂 度 的 增加 而 增加 。 为 
了 避免 在 每 个 测试 用 例 里 重复 这 些 代码 ， 测 试 框架 一 般 都 会 提供 安装 〈Setup) 和 拆 外 
(CTeardown) 函数 。 

Jasmine 提 供 了 4 个 全 局 函数 用 于 安装 和 拆卸 ， 如 表 4-3 所 示 。 


表 4-3 ”安装 和 拆卸 函数 


在 测试 套件 (describe 块 ) 中 所 有 测试 用 例 执行 之 前 执行 一 遍 beforeAll 函 数 
在 测试 套件 (describe 块 ) 中 所 有 测试 用 例 执行 完成 之 后 执行 一 遍 afterAll 函 数 


这 些 函 数 接受 一 个 回调 函数 作为 参数 ， 执 行 相关 的 安装 代码 和 拆卸 代码 。 例 如 : 








describe('Player', function() { 
Var player; 
beforeEach (function() { 
Player = new Player(); 
Ds; 
afterEach (function() { 


/* cleanup code */ 
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因为 describe 可 以 嵌 套 ， 所 以 测试 用 例 可 以 定义 在 任何 一 层 describe 块 里 ， 如 图 4-7 
所 示 。 


















































describe 





it 





























图 4-7 赔 套 的 describe 


理解 安装 和 拆 印 函 数 在 嵌 套 describe 情 况 下 的 执行 顺序 ， 有 助 于 合理 组 织 测 试用 例 。 
例如 使 用 下 面 这 个 例子 : 
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输出 结果 如 下 : 





以 上 示例 有 这 样 的 输出 结果 是 因为 : 

Jasmine 会 先 执 行 describe 块 的 代码 ， 然 后 再 执行 beforeAll、beforeEach 和 it 函 数 。 所 
以 “statement ]”“statement 3”“statement 2” 首 先 被 输出 。 

@ describe 块 的 代码 从 上 到 下 依次 执行 。 尽 管 console.log('statement 2') 在 外 层 
describe 块 里 ， 但 是 它 还 是 排 在 内 层 describe 块 的 console.log('statement 3') 后 面 
执行 。 

@ beforeAll 会 在 它 所 在 describe 块 的 测试 用 例 和 beforeEach 执 行 前 执行 ， 而 且 只 执行 
过关 

@ beforeEach 会 在 它 所 在 describe 块 和 内 层 describe 块 里 的 测试 用 例 执行 前 被 执行 。 所 
以 outer beforeEach 会 在 外 层 的 测试 用 例 spec 1 之 前 执行 ， 也 会 在 内 层 的 测试 用 例 
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spec 3 之 前 执行 。 而 inner beforeEach 只 会 在 spec 3 之 前 执行 。 

@ 在 每 个 测试 用 例 执 行 前 ，Jasmine 会 从 最 外 层 的 describe 块 开始 ， 顺 序 执行 每 个 
beforeEach， 直 到 这 个 测试 用 例 所 在 的 describe 块 为 止 。 所 以 在 执行 测试 用 例 spec 3 
之 前 ，Jasmine 先 执行 outer beforeEach， 然 后 执行 inner beforeEach。 

@ 测试 用 例会 从 上 到 下 依次 执行 。 虽 然 spec 2 在 外 层 ， 但 是 它 还 是 在 内 层 的 测试 用 例 
spec 3 后 面 执行 。 

9 测试 用 例 执行 完 后 ，Jasmine 会 执行 测试 用 例 所 在 describe 块 的 afterEach， 然 后 依次 
执行 外 层 的 afterEach， 直 至 最 外 层 describe 块 。 例 如 在 spec 3 测试 用 例 完成 后 ，inner 
beforeEach 会 先 被 执行 ， 然 后 是 outer afterEach。 

@ afterAll 会 在 它 所 在 describe 块 的 测试 用 例 和 afterEach 执 行 后 执行 ， 而 且 只 执行 一 次 。 


4.2.4 ”禁用 测试 套件 和 挂 起 测试 用 例 


有 时 候 用 户 希 望 某 些 测试 用 例 在 单元 测试 时 不 被 执行 ， 因 为 这 些 测试 用 例 还 未 完成 ， 
或 者 执行 时 间 比 较 长 。 这 时 可 以 使 用 Jasmine 提 供 的 xdescribe 函 数 来 禁用 测试 套件 ， 屏 蔽 
被 禁用 的 测试 套件 内 的 所 有 测试 用 例 ， 使 这 些 被 禁用 的 测试 用 例 不 会 出 现在 最 终 测 试 报告 
里 。 示 例 代码 如 下 : 


xdescribe('Player', function() { 


/* disabled tests */ 


测试 用 例 也 可 以 被 挂 起 (pending) 。 和 禁用 不 同 ， 挂 起 的 测试 用 例 不 会 被 执行 ， 但 
是 测试 报告 里 会 显示 处 于 挂 起 状态 的 测试 用 例 的 名 字 。 

有 3 种 挂 起 测试 用 例 的 方式 。 

(1) 使 用 xit 函 数 ， 例 如 : 


xit('can be declared "xit"', function () { 


/* code and assertions */ 


(2) 使 用 it 函 数 创建 测试 用 例 时 ， 只 提供 第 1 个 字符 串 名 字 ， 不 提供 第 2 个 回调 函数 。 
例如 : 
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it('can be declared with "it" but without a function'); 


(3) 在 it 代码 块 的 任意 地 方 调用 pending 函 数 。 例 如 : 


it('can be declared by calling "pending" in the body'，function () { 
/* code and assertions */ 


pending('this is why it is pending'); 


测试 报告 会 显示 挂 起 的 测试 用 例 ， 如 图 4-8 所 示 。 


国 Jasmine 


3 specs, 0 failures, 3 pending specs 





Pending specs 


图 4-8 ” 挂 起 的 测试 用 例 


4.3 ”创建 单元 测试 


前 面 解释 了 如 何 使 用 Jasmine 组 织 测 试用 例 ， 现 在 开始 创建 第 1 个 单元 测试 项 目 。 


4.3.1 准备 测试 场景 


准备 测试 场景 的 步骤 如 下 。 
(1) 创建 一 个 目录 jasmine-demo， 在 命令 控制 台 里 将 当前 目录 切换 到 jasmine-demo。 
(2) 运行 npm init 命 令 生成 package.json 文 件 。〈-y 人 参数 表示 不 进行 交互 ， 直 接 使 用 默 
认 设 置 ) 


C:\jasmine-demo>npm init -Y 
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(3) 为 了 方便 管理 ， 这 里 使 用 npm install 下 载 Jasmine 的 核心 类 库 。Jasmine 核 心 类 库 
会 被 下 载 到 node modules 子 目录 。 


C:\jasmine-demo>npm install jasmine-core --save-dev 


(4) 创建 src 和 spec 子 目录 。src 子 目录 用 于 存放 被 测 代码 ，spec 目 录用 于 保存 测试 用 
例 代码 。 

(5) 在 src 和 spec 目 录 下 分 别 创建 Basic 子 目录 ， 用 来 保存 第 一 个 单元 测试 示例 的 被 测 
代码 和 测试 用 例 。 此 时 目录 结构 如 下 : 


- jasmine-demo 
+-- node modules 
1 +-- jasmine-core 
4 Bre 
1 +-- Basic 
+-- spec 


| +-- Basic 


(6) 在 jasmine-demo\src\Basic 目 录 下 创建 Calc.js， 该 文件 中 是 被 测 的 JavaScript 代 码 : 
/* Calc.js */ 


var Calculator = function() {}; 


Calculator.prototype.add = function(a，b) { 


return a + b; 


4.3.2 ”编写 测试 用 例 


编写 单元 测试 用 例 一 般 遵 循 如 下 三 个 步 又 的 AAA 模 式 。 
(1) Arrange( 准 备 ) 。 设 置 测试 场景 ， 准 备 测试 数据 。 
(2) Act (执行 ) 。 调 用 被 测试 代码 。 
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(3) Assert (断言 》。 验 证 被 测 代码 的 行为 是 否 与 预期 相同 。 
在 jasmine-demo\spec\Basic 目 录 下 创建 Calc_specjs， 添 加 如 下 测试 代码 : 





以 上 测试 代码 里 有 一 名 断言: 





单元 测试 验证 测试 结果 通常 采用 断言 (assertion) 的 形式 ， 也 就 是 测试 某 个 功能 的 返 
回 结果 ， 是 否 与 预期 结果 一 致 。 如 果 与 预期 不 一 致 ， 就 表示 测试 失败 。 以 上 这 个 断言 的 意 
思 是 调用 add(1,3) 的 结果 应 该 是 4。 

所 有 的 测试 用 例 〈it 块 ) 都 应 该 包含 有 一 句 或 多 句 的 断言 ， 它 是 编写 测试 用 例 的 
关键 。 
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4.3.3 执行 测试 


为 了 执行 测试 用 例 ， 在 jasmine-demo\spec\Basic 目 录 下 创建 测试 执行 页 面 SpecRunner. 
html (参考 独立 分 发 包 里 的 SpecRunnerhtml) ， 内 容 如 下 : 


<!DOCTYPE html> 
<htm] lang="en"> 
<head> 

<meta charset="UTF-8"> 

<title>Calculator Test</title> 

<link rel="shortcut icon" type="image/png" href="../../node modules/jasmine-core/ 
images/jasmine favicon.png"> 

<link rel="stylesheet" href="../../node modules/jasmine-core/lib/jasmine-core/ 
jasmine.css"> 


<script src="../../node modules/jasmine-core/lib/jasmine-core/jasmine.js"></script> 


<script src="../../node modules/jasmine-core/lib/jasmine-core/jasmine-html.js"> 


</script> 


<script src="../../node modules/jasmine-core/lib/jasmine-core/boot.js"></script> 
<!-- include source files here... 一 
<script src="../../src/Basic/Calc.js"></script> 
<!-- include spec files here..。 一 
<script src="Calc_spec.js"></script> 
</head> 
<body> 
</body> 


</html> 





测试 执行 页 面 引 用 了 node_modules 目 录 下 的 Jasmine 核 心 类 库 ， 被 测 代码 Calcjs 以 及 测 
试用 例 代 码 Calc_spec.js。 
双击 该 页 面 ， 默 认 浏览 器 执行 测试 代码 并 输出 测试 报告 ， 如 图 4-9 所 示 。 
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国 Jasmine 


1 spec, 0 failures 


Calculator 
Test Add 
add 1 and 3 should equal 4 


图 4-9 ”Calculator 单 元 测试 报告 


4.4 Jasmine 的 断言 


Jasmine 的 断言 很 接近 于 自然 语言 。 断 言 的 写法 分 为 两 部 分 : 


expect.matcher 


第 一 部 分 expect 函 数 接受 一 个 参数 ， 这 个 参数 代表 “实际 值 ”， 也 就 是 被 测 代码 的 运 
行 结果 。 

expect 需 要 和 第 二 部 分 matcher( 匹 配器 ) 一 起 使 用 。 匹 配器 接受 “期 望 值 ”， 将 “期 
望 值 ”与 “实际 值 ”进行 布尔 判断 。Jasmine 根 据 匹配 器 的 结果 决定 测试 用 例 是 否 通过 测 
试 。 以 前 面 Cale_specjs 里 的 断言 为 例 : 


expect (result) .toBe (4); 


result 是 “实际 值 ”，toBe 是 Jasmine 内 建 的 一 个 匹配 器 ， 而 4 则 是 “期 望 值 ”。 这 个 测 
试用 例 期 望 result 的 值 是 4。 





中 如 果 匹 配器 要 执行 否定 判断 ， 可 以 在 expect 和 匹配 器 间 加 上 not， 例 如 : 


expect (false) .not.toBe (true) 








4.4.1 内 置 匹 配器 


Jasmine 提 供 了 丰富 的 内 置 匹配 器 。 
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1.toBe 





该 内 置 匹配 器 的 语义 是 期 望 “ 实 际 值 ”和 “期 望 值 ”严格 相等 〈 执 行 JavaScript'- 一 " 运 
算 ) 。 例 如 : 





如 果 想 了 解 某 个 匹配 器 如 何 进行 布尔 判断 ， 可 以 查阅 jasminejs 文 件 中 相应 匹配 器 的 源 
代码 。 例 如 toBe 匹 配器 的 代码 如 下 : 





2. toBeCloseTo 
该 内 置 匹配 器 的 语义 是 期 望 “ 实 际 值 ” 和 “期 望 值 ”足够 接近 〈 不 一 定 要 相等 ) 。 
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所 谓 “ 足 够 接近 ”， 就 是 把 两 个 数 按照 指定 的 精度 进行 四 合 五 入 后 比较 是 否 相 等 。 
toBeCloseTo 的 第 二 个 参数 用 于 指定 精度 。 以 上 第 一 个 断言 里 保留 两 位 小 数 ， 所 以 “不 接 
近 ”， 第 二 个 断言 里 只 保留 一 位 小 数 ， 所 以 “足够 接近 ”。 


3. toBeDefined 
该 内 置 匹配 器 的 语义 是 期 望 “ 实 际 值 ”已 定义 。 例 如 : 





4.toBeFalsy 
该 内 置 匹配 器 用 于 实现 布尔 测试 ， 使 期 望 “ 实 际 值 ”为 falsy。 例 如 : 
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JavaScript 里 除了 下 列 falsy 值 ?， 其 余 所 有 的 值 都 是 truthy， 包 括 “0”、 
“false”、 空 的 function、 空 的 array 和 空 的 object。 
false 
null 


undefined 


© 








document.all 

5. toBeTruthy 

该 内 置 匹配 器 用 于 实现 布尔 测试 ， 使 期 望 “ 实 际 值 ” 为 tuthy， 和 toBeFalsy 相 反 。 
例如 : 


it('toBeTruthy', function () { 
Var a, foo = 'foo'; 
expect (foo) .toBeTruthy (); 
expect (a) .not.toBeTruthy()， 


]) 7 


6.toBeGreaterThan 
该 内 置 匹配 器 的 语义 是 期 望 “实际 值 ” 大 于 “期 望 值 ”。 例 如 ， 


it('toBeGreaterThan', function () { 
var a = 3.78, 
b= 3.76; 
expect (a) .toBeGreaterThan (b); 
expect (b) .not.toBeGreaterThan (a); 


]) 


7.toBeGreaterThanOrEqual 
该 内 置 匹配 器 的 语义 是 期 望 “ 实 际 值 ” 大 于 或 等 于 “期 望 值 ”。 


@® Mozilla Developer Network. Falsy[OL]. [2016]. https://developer.mozilla.org/en-US/docs/Glossary/Falsy. 
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8. toBeLessThanOrEqual 

该 内 置 匹配 器 的 语义 是 期 望 “ 实 际 值 ”小 于 或 等 于 “期 望 值 ”。 

9. toBeLessThan 

该 内 置 匹配 器 的 语义 是 期 望 “ 实 际 值 ”小 于 “期 望 值 ”。 

10. toBeNaN 

该 内 置 匹 配器 的 语义 是 期 望 “ 实 际 值 ” 是 NaN (Not-A-Number) 9。 例 如 : 





it('toBeNaN', function () { 
expect (0 / 0).toBeNaN(); 
expect (parseInt("foo')) .toBeNaN (); 
expect (5) .not.toBeNaN(); 
]) 7 
11. toBeNull 
该 内 置 匹配 器 的 语义 是 期 望 “ 实 际 值 ”是 null。 例 如 : 


it('toBeNull', function () { 
var a = null; 
var foo = 'foo'; 
expect (a) .toBeNull (); 
expect (foo) .not .toBeNull (); 


1); 


12. toBeUndefined 
该 内 置 匹配 器 的 语义 是 期 望 “ 实 际 值 ”未 被 定义 ， 和 toBeDefined 相 反 。 例 如 ; 


it('toBeUndefined', function () { 
var a={ 
foo: 'foo' 


expect (a. fo0) .not.toBeUndefined () ; 


QO Mozilla Developer Network. NaN[OL]. 2015. https://developer.mozilla.org/en/docs/Web/JavaScript/ 
Reference/Global Objects/NaN. 
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13. toContain 
该 内 置 匹配 器 的 语义 是 期 望 “ 实 际 值 ” (数组 或 对 象 ) 包含 “期 望 值 ”。 例 如 : 


14. toEqual 
该 内 置 匹配 器 的 语义 是 期 望 两 个 对 象 (“ 实 际 值 ” 和 “期 望 值 ”) 相等 。 例 如 ， 
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查看 Jasmine 里 toEqual 函 数 的 实现 ， 会 注意 到 toEqual 函 数 接受 cutomEqualityTesters 参 
数 ， 这 个 参数 是 自 定义 相等 检验 器 。 如 果 用 户 定义 了 自己 的 相等 检验 器 ，Jasmine 会 使 用 
这 些 相 等 检验 器 对 “实际 值 ”和 “期 望 值 ”进行 相等 比较 。 例 如 : 





15. toMatch 
该 内 置 匹配 器 的 语义 是 期 望 “ 实 际 值 ”能 够 匹配 “期 望 值 ”，“ 期 望 值 ” 可 以 是 正则 
表达 式 ， 也 可 以 是 字符 串 。 例 如 : 
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16. toThrow 
该 内 置 匹配 器 的 语义 是 期 望 “ 实 际 值 ”《〈 函 数 ) 会 抛 出 异常 。 例 如 : 





17.toThrowError 
该 内 置 匹配 器 的 语义 是 期 望 “ 实 际 值 ”〈 函 数 ) 抛 出 “期 望 值 ”所 指定 的 异常 ， 异 常 
信息 可 以 是 字符 串 、 正 则 表达 式 、 错 误 类 型 和 错误 信息 。 例 如 : 
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4.4.2 ” 自 定义 匹配 器 ( Custom Matcher ) 


如 果 内 置 匹 配器 无 法 满足 需求 的 话 ， 可 以 编写 自 定义 匹配 器 来 封装 匹配 规则 。 

Jasmine 使 用 工厂 模式 创建 自 定义 匹配 器 。 匹 配器 工厂 是 一 个 函数 ， 函 数 名 就 是 自 定 
义 匹 配器 的 名 称 ， 也 就 是 暴露 给 expect 调 用 的 名 称 。 它 接受 两 个 参数 : 

@ util， 给 匹配 器 使 用 的 一 组 工具 函数 。 

@ customEqualityTesters， 调 用 utilequals 时 所 必需 。 

匹配 器 工厂 返回 一 个 对 象 ， 这 个 对 象 要 包含 名 为 compare 的 函数 ， 即 匹配 器 的 对 比 函 
数 。 这 个 函数 将 实现 自 定义 匹配 规则 。Jasmine 在 执行 匹配 时 会 调用 compare 函 数 。 以 自 定 
义 匹 配器 isBetween 为 例 ， 示 例 代码 如 下 : 


var customMatchers = { 
isBetween: function(util, customEqualityTesters){ 
return { 
compare:function(actual, min, max) { 
Var result = { 
pass: false, 
message: 'Expected ' + actual + ' is not between ' 
+ min + "and ' + max 
a 
if(actual >= min && actual <= max){ 
result.pass = true; 
result.message = 'Expected ' + actual + ' is between ' 
+ min + "and ' + max;; 
} 


return result; 
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isBetween 是 匹配 器 工厂 ， 也 是 要 实现 的 自 定 义 匹配 器 的 名 称 。 它 返回 一 个 对 象 ， 这 
个 对 象 里 的 compare 函 数 接受 的 第 一 个 参数 是 actual， 代 表 “ 实 际 值 ”。 后 面 的 参数 是 可 选 参 
数 ， 代 表 “ 期 望 值 ”。 在 上 面 的 示例 里 ， 期 望 “ 实 际 值 ” 在 “期 望 值 ” min 和 max 之 间 。 

compare 函 数 必须 返回 一 个 结果 对 象 。 该 对 象 必须 包含 一 个 布尔 值 类 型 的 pass 成 员 属 
性 ， 告 诉 Jasmine 匹 配 结果 。 在 上 面 的 示例 里 ， 一 旦 “实际 值 ” 在 “期 望 值 ”min 和 max 之 
间 ， 则 将 pass 属 性 设 为 tue。 

如 果 匹 配 失 败 ， 但 是 在 返回 的 result 对 象 中 包含 了 message 成 员 属性 的 话 ，Jasmine 会 使 
用 message 的 值 作为 错误 提示 。 

通常 在 beforeEach 里 使 用 jasmine.addMatchers 函 数 注 册 自 定义 匹配 器 。 该 函数 接受 一 个 
对 象 参 数 ， 这 个 对 象 可 以 包含 多 个 匹配 器 工厂 〈 在 上 面 的 示例 里 customerMatchers 就 是 这 
样 一 个 对 象 ，isBetween 是 其 中 的 一 个 字段 ) 。 例 如 ， 使 用 下 面 的 代码 : 


beforeEach(function() { 
jasmine .addMatchers (customMatchers) 


DD); 


就 可 以 在 测试 用 例 里 使 用 isBetween 自 定义 匹配 器 了 。 


it('against isBetween', function(){ 
expect (8) .isBetween(4, 10); 


]) 7 


如 果 用 户 的 自 定义 匹配 器 需要 控制 .not 的 行为 〈 不 是 简单 的 布尔 值 取 反 ) ， 那 么 匹 
配器 工厂 返回 的 对 象 里 除了 compare 函 数 ， 还 需要 包含 另外 一 个 函数 negativeCompare。 这 
样 ，Jasmine 使 用 -not 的 时 候 会 执行 negativeCompare 函 数 。 


4.4.3” 自 定义 相等 检验 器 (Custom Equality Tester ) 


在 Jasmine 里 用 户 可 以 使 用 toEqual 内 置 匹 配器 判断 两 个 对 象 是 否 相等 。 如 果 内 置 匹配 
器 的 默认 规则 无 法 满足 需求 的 话 ， 可 以 创建 自 定 义 相等 检验 器 来 使 用 自己 的 相等 规则 。 

例如 ， 对 于 以 下 示例 里 的 Duck 类 型 ， 用 户 希 望 两 个 Duck 对 象 相等 的 条 件 是 canSwim、 
canWalk 和 color 相 等 ， 而 canFly 或 其 他 属性 不 属于 判断 条 件 。 这 种 情况 就 需要 使 用 自 定义 
相等 检验 器 。 
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自 定义 相等 检验 器 是 一 个 函数 ， 它 接受 两 个 参数 ， 也 就 是 要 进行 比较 的 对 象 。 自 定 
义 相等 检验 器 根据 相应 条 件 对 这 两 个 对 象 进行 比较 ， 结 果 返 回 true 或 false 值 。 如 果 自 定义 
相等 检验 器 无 法 进行 判断 ， 则 返回 undefined。 以 下 示例 里 ， 仅 对 两 个 对 象 的 canSwim、 
canWalk 和 color 属 性 进行 比较 。 
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使 用 自 定义 相 等 检验 器 前 需要 注册 。 注 册 自 定义 相等 检验 器 通常 通过 在 beforeEach 函 
数 里 调用 jasmine.addCustomEqualityTester 函 数 实现 。 示 例 代码 如 下 : 








beforeEach (function () { 


jasmine.addCustomEqualityTester (duckCustomEquality); 


Ds; 


注册 后 就 可 以 比较 两 个 Duck 对 象 了 : 


it('against Duck class', function () { 

war Gd 二 下 
canSwim: true, 
canWalk: true, 
canClimb: true, 
color: 'white', 
canFly: true 

] 

var duck = new Duck(); 

expect (d) .toEqual (duck); 

d.canSwim = false; 


expect (d) .not.toEqual (duck); 


4.4.4” 非 对 称 相等 检验 器 (Asymmetric Equality Tester ) 


自 定义 相等 检验 器 用 来 检验 两 个 对 象 是 否 相 等 。 如 果 只 需要 检验 某 一 个 对 象 是 否 满 
足 特定 条 件 ， 而 不 是 两 个 对 象 严格 相等 时 ， 我 们 可 以 自 定义 一 个 非 对 称 相等 检验 器 。 它 作 
为 一 个 “期 望 值 ”对 象 出 现 ， 必 须 包含 一 个 名 为 asymmetricMatch 的 方法 。Jasmine 在 使 用 
toEqual 比 较 “ 实 际 值 ”和 非 对 称 相等 检验 器 时 会 调用 这 个 asymmetricMatch 方 法 。 


describe ('Asymmetry Match', function() { 


var tester = { 
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asymmetricMatch: function(actual) { 
var secondValue = actual.split(',')[1]; 


return secondValue === 'bar'; 


I 
it('dives in deep', function() { 
expect ('foo,bar,baz, quux') .toEqual (tester); 


Ds; 


以 上 示例 创建 了 非 对 称 相 等 检验 器 tester， 它 的 asymmetricMatch 方 法 期 望 输入 的 “ 实 
际 值 ”字符 串 以 逗号 分 隔 后 第 二 个 内 容 为 bar。 


4.4.5 ”辅助 匹配 函数 


针对 一 些 常用 情况 ，Jasmine 提 供 辅助 函数 帮助 开发 人 员 进行 匹配 。 这 些 辅助 函数 会 
返回 非 对 称 相 等 检验 器 (具有 asymmetricMatch 方 法 ) ， 封 装 了 需要 匹配 的 “期 望 值 ” 和 
特殊 匹配 规则 。 

1.jasmine.any 

通常 传 给 匹配 器 的 “期 望 值 ”是 一 个 数字 、 字 符 串 或 对 象 等 具体 实例 ， 然 后 将 之 和 
“实际 值 ”做 比较 。 有 时 候 用 户 希 望 判 断 “ 实 际 值 ”是 否 是 某 种 类 型 ， 而 不 是 具体 实例 ， 
这 时 可 以 用 jasmine.any 封装 匹配 类 型 ， 例 如 : 


互 





describe('jasmine.any', function () { 
it('matches any value', function () { 
expect ({}) .toEqual (jasmine.any (Object)); 


expect (12) .toEqual (jasmine.any (Number)); 


Ds; 


jasmine.any 函 数 接受 构造 函数 或 类 名 作为 参数 。 这 个 构造 函数 或 类 名 被 jasmine.any 
封装 成 “期 望 值 ”， 期 望 “ 实 际 值 ”所 具备 的 类 型 。 以 上 示例 里 “实际 值 ”{} 是 一 个 
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Object，12 是 一 个 Number， 所 以 测试 通过 。 

2.jasmine.anything 

jasmine.anything 代 表 任 何 存在 的 值 。 只 要 “实际 值 ” 不 是 null 或 undefined， 测 试 就 通 
过 。 例 如 : 





3. jasmine.objectContaining 


jasmine.objectContaining 用 来 判断 “实际 值 ”对 象 是 否 包 含 某 个 键 值 对 。 例 如 : 
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4. jasmine.arrayContaining 
jasmine.arrayContaining 用 来 判断 输入 的 “期 望 值 ”是 否 是 “实际 值 ”数组 的 一 部 分 。 
例如 : 





5. jasmine.stringMatching 

jasmine.stringMatching 用 来 判断 输入 的 “期 望 值 ”是 否 是 “实际 值 ”字符 串 的 一 部 
分 。 如 果 “ 期 望 值 ”是 正则 表达 式 ， 那 么 就 会 判断 “实际 值 ”是 否 满足 正则 表达 式 。 它 也 
可 以 用 来 判断 对 象 内 的 字符 串 。 示 例 代码 如 下 : 





| 74 | Web 前 端 测试 与 集成 一 一 Jasmine/Selenium/Protractor/Jenkins 的 最 佳 实践 


4.5 ”测试 替身 ( Test Double ) 


开发 人 员 编 写 的 测试 用 例会 设置 有 用 户 场景 ， 执 行 应 用 的 某 个 特定 功能 单元 ， 然 后 验 
证 功能 单元 的 返回 结果 。 如 果 被 测 的 功能 单元 不 依赖 其 他 单元 ， 那 么 测试 会 相对 简单 。 但 
是 在 实际 环境 下 ， 一 般 被 测 单元 总 会 依赖 其 他 的 功能 单元 : 

@ 被 测 单元 需要 输入 数据 ， 它 的 运行 会 受到 输入 数据 的 影响 。 这 些 输入 数据 可 能 是 

测试 用 例 以 回调 函数 等 形式 提供 给 被 测 的 功能 单元 ， 也 有 可 能 是 被 测 单元 调用 它 
所 依赖 的 第 三 方 功能 单元 的 API， 然 后 以 依赖 单元 的 返回 值 作为 输入 数据 ， 例 如 通 
过 访问 数据 库 获得 数据 。 

@ 被 测 单元 需要 输出 结果 。 输 出 的 结果 可 能 是 以 函数 返回 值 的 形式 返回 给 宿主 程 

序 ， 也 可 能 功能 单元 本 身 不 直接 返回 数据 ， 而 是 调用 一 系列 第 三 方 功能 单元 的 
API， 这 些 调用 依赖 单元 的 行为 也 是 一 种 输出 结果 。 

当 被 测 单元 依赖 第 三 方 单元 时 ， 单 元 测试 就 变 得 复杂 起 来 。 虽 然 可 以 将 功能 单元 和 它 
的 依赖 单元 一 起 进行 测试 ， 但 是 这 些 依赖 单元 可 能 在 测试 环境 中 难以 建立 ， 或 者 难以 返回 
测试 所 需要 的 数据 。 此 外 ， 单 元 测试 需要 尽 可 能 快速 地 运行 ， 若 被 测 单元 调用 依赖 的 第 三 
方 子 系统 (比如 数据 库 ) 则 可 能 会 花费 比较 长 的 时 间 。 

另 一 种 方案 就 是 将 被 测 的 功能 单元 和 依赖 单元 隔离 ， 创 建 一 些 比较 简单 但 是 行为 和 
实际 依赖 单元 类 似 的 假 单元 来 代替 真实 的 依赖 单元 ， 以 降低 测试 的 复杂 性 和 提高 测试 的 
可 行 性 。 

Gerard Meszaros 借 鉴 电 影 替 身 〈Double) 的 概念 ， 将 这 些 假 单元 称 为 测试 替身 (Test 
Double) 。 





4.5.1 ”测试 替身 的 类 型 


测试 替身 主要 提供 两 项 功能 : 为 被 测 单元 提供 输入 数据 和 记录 被 测 单元 的 输出 结果 。 

当 依赖 单 元 提供 输入 数据 时 ， 单 元 测试 需要 控制 依赖 单元 的 行为 ， 让 依赖 单元 提供 不 
同类 型 的 数据 来 测试 功能 单元 的 各 种 行为 。 如 果 用 测试 奉 身 替换 依赖 单元 ， 则 测试 替身 一 
般 会 模拟 提供 以 下 种 类 的 测试 数据 : 


@® Gerard Meszaros. xUnit Test Patterns: Refactoring Test Code[M]. Addison-Wesley, 2007. 
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@ 方法 /函数 的 返回 值 

@ 可 更 新 参数 的 值 

@ 可 以 抛 出 的 异常 

执行 单元 测试 后 需要 验证 测试 结果 ， 有 时 候 被 测 单元 本 身 不 返回 测试 结果 ， 而 是 调 
用 依赖 单元 〈 例 如 日 志 记录 模块 ) 间接 输出 结果 ， 这 时 是 无 法 通过 函数 返回 值 来 验证 
被 测 单元 是 否 执行 成 功 的 ， 而 需要 检查 日 志 记 录 模 块 是 否 记录 了 相应 的 操作 ， 来 间接 
验证 测试 结果 。 如 果 用 测试 替身 替换 依赖 单元 ， 那 么 测试 替身 需要 有 记录 调用 行为 的 
功能 。 

根据 使 用 形式 的 不 同 ， 测 试 替身 有 以 下 类 型 。 

1. Dummy Objects 

被 测 单元 的 函数 /方法 可 能 会 接受 一 些 参数 ， 然 后 将 传 入 的 参数 对 象 存 在 实例 变量 里 
供 以 后 使 用 。 有 时 候 这 些 参数 对 象 不 会 在 当前 的 单元 测试 过 程 中 被 使 用 ， 所 以 它们 不 会 影 
响 被 测 函数 /方法 的 行为 。 

因为 这 些 参数 对 象 不 会 被 使 用 ， 所 以 在 单元 测试 中 创建 这 些 实际 的 参数 对 象 是 没 
有 必要 的 ， 而 只 需要 简单 并 且 没有 依赖 的 “ 假 ” 对 象 。 这 样 的 “ 假 ” 对 象 就 是 Dummy 
Object。 

最 简单 的 Dummy Object 是 null Cnil，nothing) ， 但 有 时 候 被 测 函 数 /方法 要 求 输入 
的 参数 是 not-null， 这 种 情况 下 只 能 被 迫 创 建 一 个 真实 对 象 。 对 于 动态 类 型 语言 〈 例 如 
JavaScript) ， 可 以 使 用 String 或 Object， 对 于 静态 类 型 语言 〈 例 如 C#、Java) ， 必 须 确保 
Dummy Object 和 对 应 的 参数 对 象 类 型 相 匹配 。 

2. Test Stubs 

被 测 单元 在 执行 时 通常 需要 调用 一 些 第 三 方 的 依赖 单元 。 调 用 依赖 单元 的 结果 会 影响 
到 被 测 单元 的 行为 。 换 一 个 角度 讲 ， 调 用 依赖 单元 的 结果 成 为 了 被 测 单元 的 输入 数据 。 在 
单元 测试 中 ， 利 用 “ 假 ” 的 对 象 代替 实际 的 依赖 单元 ， 这 样 “ 假 ” 对 象 返回 的 各 种 预 设 
结果 会 影响 被 测 单元 的 行为 ， 确 保 被 测 单元 内 的 代码 都 被 测试 到 。 这 种 “ 假 ”对 象 称 为 
Test Stub， 如 图 4-10 所 示 。 

Test Stub 一 般 会 实现 依赖 单元 的 接口 〈interface) 预先 设置 返回 结果 。 在 准备 测试 场 
景 时 ，Test Stub 用 来 取代 实际 的 依赖 单元 ， 这 样 测试 执行 时 被 测 单元 调用 Test Stub，Test 
Stub 返 回 预 先 设置 的 结果 给 被 测 单元 ， 两 者 的 交互 完全 在 被 测 单元 内 部 ， 对 测试 用 例 透 
明 。 当 被 测 单元 执行 完成 后 ， 测 试用 例会 验证 被 测 单元 的 执行 结果 。 
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图 4-10 Test Stub 类 型 
3. Test Spies 
有 时 被 测 单元 本 身 不 返回 测试 结果 ， 但 它 会 调用 依赖 单元 间接 输出 执行 结果 ， 例 如 日 
志 记 录 模 块 。 为 了 验证 被 测 单元 是 否 按 预期 执行 ， 可 利用 “ 假 ”对 和 象 来 代替 实际 的 依赖 单 
元 。 这 个 “ 假 ” 对 象 会 记录 并 保存 所 有 对 它 的 调用 信息 。 这 种 假 对 象 称 为 Test Spy， 如 图 
4-11 所 示 。 
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图 4-11 Test Spy 类 型 

当 被 测 单元 执行 完成 后 ， 测 试用 例会 检查 Test Spy 中 保存 的 信息 来 验证 被 测 单元 是 否 
按 预 期 执行 。 

4. Mock Objects 

Mock Object 和 Test Spy 类 似 ， 也 是 代替 实际 的 依赖 单元 ， 记 录 并 保存 被 测 单元 对 它 的 
所 有 调用 信息 。 和 Test Spy 不 同 的 是 ，Mock Object 除了 记录 信息 以 外 ， 它 会 将 被 测 单元 对 
它 的 调用 和 测试 用 例 预先 设置 的 期 望 行为 进行 比较 ， 一 旦 发 现 被 测 单元 的 行为 偏离 预期 ， 
就 立即 使 测试 失败 。 换 句 话说，Mock Object 在 Test Spy 的 基础 上 加 入 了 验证 的 功能 ， 如 图 
4-12 所 示 。 

由 于 Mock Object 封装 了 测试 验证 的 逻辑 ， 所 以 Mock Object 可 以 被 不 同 测试 用 例 所 
重用 。 在 使 用 Mock Object 的 情况 下 ， 测 试用 例 本 身 理 论 上 不 需要 验证 代码 ， 它 完全 信任 
Mock Object 的 验证 结果 。Mock Object 一 旦 发 现 被 测 单位 行为 异常 ， 可 以 立即 使 测试 失 
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败 ， 这 样 可 以 快速 有 效 地 定位 错误 发 生 的 位 置 。 与 之 相反 ，Test Spy 没有 验证 功能 ， 只 能 
依赖 测试 用 例 在 被 测 单元 执行 完成 后 再 进行 判断 ， 所 以 Test Spy 必须 记录 更 详细 的 诊断 信 
息 才能 定位 错误 位 置 。 
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图 4-12 ”Mock Object 类 型 
5. Fake Objects 
有 时 在 测试 环境 中 建立 依赖 单元 比较 困难 ， 或 者 调用 依赖 单元 要 花 很 长 时 间 ， 就 要 用 
到 Fake Objects。Fake Object 拥有 几乎 和 实际 依赖 单元 一 样 的 功能 ， 用 它 来 替换 实际 依赖 单 
元 ， 被 测 单元 仍然 能 够 正常 工作 ， 如 图 4-13 所 示 。 例 如 使 用 一 个 内 存 数据 库 取代 实际 的 数 
据 库 就 是 一 个 常见 的 Fake Object 使 用 场景 。 
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图 4-13 ”Fake Object 类 型 
Fake Object 和 Test Stub、Test Spy 以 及 Mock Object 的 区 别 在 于 它 只 是 为 了 减少 对 外 部 
环境 的 依赖 ， 是 一 种 替代 实现 ， 并 不 提供 控制 输入 输出 和 验证 等 功能 。 


4.5.2 使 用 Jasmine Spies 


了 解 了 什么 是 测试 蔡 身 ， 那 么 如 何 创建 测试 替身 呢 ? 虽然 用 户 可 以 根据 测试 需求 进行 
手工 创建 ， 但 是 效率 很 低 ， 因 此 通常 会 使 用 一 些 流 行 的 JavaScript 测 试 替身 库 〈 例 如 Sinon. 
JS) 来 实现 。Jasmine 可 以 使 用 Sinon.JS， 但 Jasmine 其 实 有 内 建 的 测试 替身 库 。 
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在 Jasmine 里 ， 各 种 测试 替身 统称 为 Spy。 开 发 人 员 使 用 Jasmine Spies 来 替代 真实 的 函 
数 /方法 或 者 对 象 ， 并 且 跟 踪 它 们 的 调用 记录 和 传 入 的 所 有 参数 。Jasmine Spies 只 存在 于 
describe 块 或 者 it 块 中 ， 在 每 个 测试 用 例 使 用 结束 后 被 销毁 。 

1. 使 用 spy 跟 踪 函 数 的 调用 

假设 类 CarAssemble 有 3 个 成 员 函 数 addWheel、addEngine 和 assemble， 其 中 ，assemble 
函数 会 调用 addWheel 和 addEngine (assemble 依 赖 atdqWheel 和 addEngine) ， 但 是 assemble 函 
数 本 身 不 返回 结果 ， 有 如 下 代码 : 


var CarAssemble = function () { 
this.wheel = 0; 
this.engine = null; 

] 

CarAssemble.prototype.addWheel = function(){ 
this.wheel += 1; 

村 

CarAssemble.prototype.addEngine = function(engineName)1{ 
this.engine = engineName; 

] 

CarAssemble.prototype.assemble = function(){ 
this.addWheel (); 
this.addWheel (); 
this.addWheel (); 
this.addWheel (); 


this.addEngine('V8'); 





因为 assemble 函 数 没有 返回 结果 ， 为 了 验证 它 是 否 成 功 执行 ， 需 要 使 用 spy 来 跟踪 
addWheel 和 addEngine 的 调用 。 以 下 是 测试 用 例 代码 : 


describe('Spies Test', function () { 
it('for spyOn against CarAssemble function', function () { 


Var fake = new CarAssemble(); 
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// Replace addWheel function with a spy 
spyOn (fake, 'addWheel'); 

// Replace addEngine function with another spy 
spyOn (fake, 'addEngine'); 

fake.assemble(); 

expect (fake.addWheel) .toHaveBeenCalled(); 

expect (fake.addWheel) .toHaveBeenCalledTimes (4); 
expect (fake.addEngine) .toHaveBeenCalledWith('V8°'); 
expect (fake.addWheel .calls.any()).toEqual (true); 


expect (fake.addWheel.calls.count ()) .toEqual (4); 


以 上 测试 用 例 中 ， 为 了 测试 assemble 函 数 ， 首 先 创 建 了 一 个 CarAssemble 对 象 ， 然 后 
调用 spyOn 函 数 创 建 spy 代 替 addWheel 和 addEngine 这 两 个 实际 函数 。 此 时 fake.addWheel 和 
fake.addEngine 已 经 不 是 实际 函数 而 是 spy 了 了 。 

spyOn 是 Jasmine 的 一 个 全 局 函数 ， 用 来 创建 一 个 spy 并 且 代 替 一 个 已 存在 的 函数 。 其 
用 法 如 下 : 


// assumes obj.method is an existing function 


spyon(obj， 'method’); 


接 下 来 执行 被 测 代码 fake.assemble 并 验证 spy 是 否 如 预期 被 调用 。Jasmine 提 供 了 spy 相 
关 的 匹配 器 ， 如 表 4-4 所 示 。 
表 4-4 spy 相关 的 匹配 器 


匹配 器 描 述 


toHaveBeenCalled | 测试 spy 是 否 被 调用 过 。 如 果 被 调用 ， 返 回 true 
toHaveBeenCalledTimes | 测试 spy 是 否 被 调用 过 指定 的 次 数 。 示 例 代码 里 期 望 fake.addWheel 被 调用 4 次 


测试 spy 被 调用 时 的 参数 列表 。 若 匹配 则 返回 true。 示 例 代码 里 期 望 fake. 
addEngine 被 调用 时 传 入 的 参数 是 “V8” 


如 果 需 要 进行 否定 判断 ， 例 如 期 望 spy 被 调用 时 不 会 传 入 某 些 参 数 ， 可 以 在 expect 和 匹 
配器 之 间 加 not。 例 如 : 














toHaveBeenCalledWith 
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expect (fake.addEngine) .not.toHaveBeenCalledWith ('V6'); 


除了 以 上 匹配 器 ， 访 问 spy 的 calls 属 性 还 可 以 获得 对 spy 的 调用 信息 ， 如 表 4-5 所 示 。 
表 4-5 ”spy 的 calls 属 性 


























calls 属 性 描 述 
.calls.anyO 记录 spy 是 否 被 调用 过 ， 如 果 没 有 ， 返 回 false， 否 则 ， 返 回 true 
.calls.count() 返回 spy 被 调用 过 的 次 数 
.calls.argsFor(index) 返回 spy 被 第 index 次 调用 时 的 参数 (index 从 0 开始 计算 ) 
.calls.allArgs() 返回 spy 所 有 被 调用 的 参数 
.calls.all0) 返回 spy 所 有 被 调用 的 this 上 下 文 和 参数 
.calls.mostRecent() 返回 spy 最 近 1 次 被 调用 的 this 上 下 文 和 参数 
.calls.first() 返回 spy 第 1 次 被 调用 的 this 上 下 文 和 参数 
.calls.reset() 清除 spy 的 所 有 调用 记录 





2. 使 用 spy 调 用 实际 函数 

spyOn 函 数 创建 的 spy 只 能 记录 被 调用 的 信息 ， 而 不 会 修改 任何 数据 ， 也 不 影响 其 他 
函数 或 对 象 的 状态 。 有 时 除了 需要 跟踪 函数 的 调用 ， 用 户 还 希望 在 测试 时 能 执行 实际 的 函 
数 ， 并 更 新 被 测 单元 的 数据 。 此 时 只 要 在 spyOn 创 建 的 spy 后 面 链 式 调用 and.callThrough， 
就 可 以 让 spy 在 被 调用 时 ， 除 了 记录 调用 信息 ， 还 继续 调用 实际 函数 。 


it('for spyOn when configured to call through', function () { 
var fake = new CarAssemble(); 
spyOn (fake, "addEngine') .and.callThrough(); 
fake.assemble(); 
expect (fake.addEngine) .toHaveBeenCalled(); 
expect (fake.engine) .toBe('V8°'); 


Ds; 


3. 使 用 spy 控 制 函数 的 返回 结果 

单元 测试 中 ， 有 时 希望 利用 “ 假 ” 对 象 返回 各 种 可 能 的 结果 来 影响 被 测 单元 的 行为 ， 
这 时 可 以 在 spyOn 函 数 创 建 的 Spy 后面 链 式 调 用 and.returmnValue， 指 定 返回 结果 。 这 样 每 次 
调用 spy 都 可 以 得 到 这 个 指定 的 返回 值 。 


it('for spyOn when configured to fake a return value', function() { 
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如 果 要 设 定 一 个 结果 列表 ， 可 以 在 spy 后 面 链 式 调 用 and.returnValues， 每 次 调用 spy， 
就 会 依次 从 这 个 结果 列表 返回 一 个 值 。 如 果 所 有 的 值 都 被 返回 了 ， 那 么 Jamsine 会 返回 
undefined。 例 如 : 





如 果 在 spy 后 面 链 式 调用 and.throwError， 那 么 任何 对 该 spy 的 调用 都 会 抛 出 指定 的 错 
误 。 示 例 代码 如 下 : 
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getEngine: function () { 


return 'V8'; 


}; 
spyOn (engineSupplier, 'getEngine').and.throwError('broken engine'); 
expect (function () { 
engineSupplier.getEngine(); 
}) .toThrowError('broken engine'); 


]) 7 


链 式 调用 and.callThrough、and.returnValue 等 其 实 是 为 创建 的 spy 增 加 了 新 功能 ， 用 户 
可 以 在 任何 时 候 调用 .and.stub 将 spy 恢 复 到 原始 状态 (去 除 这 些 新 功能 ， 只 能 记录 调用 信 
息 ) 。 示 例 代 码 如 下 : 


it('can fake a value and then stub in the same spec', function () { 
var engineSupplier = { 
getEngine: function () { 


return 'V8'; 


}; 

spyOn (engineSupplier, 'getEngine').and.returnValue('V6'); 
expect (engineSupplier.getEngine()).toBe('V6'); 
engineSupplier.getEngine.and.stub(); 


expect (engineSupplier.getEngine()).toBeUndefined(); 


1):; 


4. 使 用 spy 将 实际 函数 蔡 换 成 新 函数 
有 时 候 需要 在 测试 时 使 用 一 个 全 新 的 函数 实现 替换 实际 的 函数 ， 此 时 可 以 在 Jasmine 
中 spyOn 后 面 的 链 式 中 调用 and.callFake， 以 指定 一 个 新 函数 。 例 如 : 























it('for spyOn when configured with an alternate implementation'，function() { 


var engineSupplier = { 
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getEngine: function() { 


return 'V8'; 


7 
var fakeEngine = function() { 
return "Faked Engine'; 
}; 
spyOn (engineSupplier, 'getEngine') .and.callFake (fakeEngine); 


expect (engineSupplier.getEngine()).toBe('Faked Engine'); 


Ds; 


5. 创建 新 的 spy 函数 

前 面 介绍 了 在 单元 测试 中 创建 spy 蔡 换 实际 已 存在 的 函数 〈 例 如 addWheel) 。 有 时 在 
单元 测试 中 技术 人 员 只 需要 一 个 “ 空 ” 函 数 ， 这 时 可 使 用 jasmine.createSpy 来 创建 一 个 全 
新 的 spy 函 数 〈 不 用 替换 实际 函数 ) 。 和 其 他 spy 一 样 ， 这 个 新 的 spy 函 数 可 以 跟踪 函数 的 
调用 和 传 入 的 参数 ， 但 是 本 身 没有 实现 代码 。 示 例 代码 如 下 : 




















it('for a spy, when created manually', function() { 
var engine = jasmine.createSpy ('Named Engine'); 
engine('Faked Engine'); 
expect (engine) .toHaveBeenCalled(); 


expect (engine) .toHaveBeenCalledWith('Faked Engine'); 


1D); 





和 spyOn 一 样 ， 在 createSpy 后 面 也 可 以 链 式 调用 and.ReturnValue、and.callFake 等 函 
数 。 例 如 : 











jasmine.createSpy('V6 Engine') .and.returnValue('V6'); 
jasmine.createSpy('V8 Engine') .and.callFake (function() { 


return 'V8'; 
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6. 创 建 spy 对 象 
使 用 jasmine.createSpyObj 函 数 可 以 创建 一 个 spy 对 象 。 示 例 代 码 如 下 : 


it('for multiple spies, when created manually', function() { 
Var engine = jasmine.createSpyObj ('Named Engine', ['start', 'stop']); 
engine.start (); 
engine.stop(); 
expect (engine.start) .toBeDefined(); 
expect (engine.stop) .toBeDefined(); 
expect (engine.start) .toHaveBeenCalled(); 
expect (engine.start) .toHaveBeenCalled(); 


]) 


jasmine.createSpyObj 函 数 的 第 1 个 参数 是 对 象 名 称 ， 第 2 个 参数 是 字符 串 数 组 ， 数 组 
内 每 个 字符 串 代 表 spy 对 象 的 一 个 属性 ， 都 是 spy 函 数 。 在 上 面 的 示例 中 ，start 和 stop 都 是 
engine 对 象 的 成 员 函 数 ， 作 为 spy 函 数 使 用 。 


4.6 测试 异步 代码 


虽然 JavaScript 的 执行 环境 是 单线 程 的 ， 但 是 JavaScript 支 持 异 步 模式 ， 有 很 多 通过 回 
调 函数 来 执行 的 异步 调用 ， 例 如 setTimeonut 或 setInterval。JavaScript 单 元 测试 需要 考虑 测试 
以 下 3 种 异步 代码 : 

@ 包含 调用 setTimeout 或 setInterval 的 代码 。 

@ 需要 花费 一 点 时 间 才 能 显示 的 界面 效果 ， 例 如 网 页 元 素 的 淡 进 淡出 。 

@ Ajax 调 用 。( 在 下 一 节 将 介绍 使 用 Jasmine 插 件 进行 测试 的 方法 ) 

为 了 演示 测试 异步 代码 ， 在 jasmine-demo\src\Async 目 录 下 创建 Engine.js。 以 下 是 被 测 
的 JavaScript 代 码 。 


/* Engine.js */ 


var Engine = function(displayElement) { 
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以 上 代码 中 ，start 函 数 里 使 用 jQuery 的 fadeOut 函 数 实现 指定 页 面 元 素 的 淡出 效果 ， 时 
长 为 1] 秒 1000 毫秒 ) ， 元 素 淡出 后 会 执行 回调 函数 cb。 
在 jasmine-demo\spec\Async 目 录 下 创建 Engine_spec.js 文 件 ， 添 加 以 下 测试 代码 : 





以 上 示例 使 用 了 jQuery 获取 页 面 中 的 fade_div 元 素 ， 在 测试 用 例 中 调用 engine.start， 然 
后 验证 fade_div 元 素 是 否 消失 。 

因为 使 用 了 jQuery， 所 以 SpecRunnerhtml 需 要 引用 jQuery 库 ， 同 时 也 预先 准备 了 fade_ 
div 元 素 ， 供 测试 使 用 。 该 .html 文 件 内 容 如 下 : 
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<head> 


<script src="../../node modules/jquery/dist/jquery.min.js"></script> 
<!-- include source files here... 一 
<script src="../../src/Async/Engine.js"></script> 
<!-- include spec files here... 一 
<script src="Engine_spec.js"></script> 
</head> 
<body> 
<div id="fade-div">some content</div> 
</body> 


</html> 


双击 SpecRunner.html 文 件 ， 默 认 浏 览 器 执行 测试 代码 并 且 报 告 测试 失败 ， 如 图 4-14 
所 示 。 


轩 Jasmine 
x 


1 spec, 1 failure 
Spec List 


Engine UI Tests should work with a visual effect 


Expected ‘block' to be "none '. 
Error: Expected ‘block’ to be ‘none' 


图 4-14 ”Engine 单 元 测试 失败 报告 
测试 失败 的 原因 是 engine.start 里 使 用 的 fadeOut 是 一 个 异步 调用 ， 页 面 元 素 要 在 1 秒 后 
才 消 失 。 但 是 在 测试 用 例 里 ，engine.start 函 数 执行 后 马上 检验 页 面 元 素 是 否 消失 ， 此 时 测 
试 页 面 元 素 仍 旧 存 在 ， 所 以 测试 失败 。 例 如 : 


engine.start (); 
[| 


expect (el .css("display")) .toBe ("none"); 


为 了 测试 以 上 的 异步 代码 ， 需 要 用 到 Jasmine 的 异步 支持 。 
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4.6.1 Jasmine 的 异步 支持 


为 了 支持 异步 代码 的 测试 ，Jasmine 的 全 局 函数 beforeAll、afterAll、beforeEach、 
afterEach 和 it 的 回调 函数 〈 代 码 块 ) 有 一 个 可 选 参 数 done。 例 如 : 


describe ("Asynchronous specs", function () { 
var value; 
beforeEach (function (done) { 
setTimeout (function () { 
value = 0; 
done (); 
}, 1000); 
]) 


it("should support async execution", function (done) { 


参数 done 用 于 通知 Jasmine: 这 里 有 一 个 异步 函数 ， 必 须 等 到 done() 被 调用 后 才能 结束 
当前 测试 步骤 (beforeAll、afterAll、beforeEach、afterEach 和 it) ， 再 继续 执行 下 一 步 的 测 
试 代码 。 所 以 在 上 面 的 示例 中 ，Jasmine 会 在 beforeEach 里 等 待 1 秒 (1 秒 后 done 被 调用 〉， 
然后 再 执行 后 续 的 it 函 数 。 

默认 情况 下 Jasmine 在 每 一 步骤 (beforeAll、afterAll、beforeEach、afterEach 和 it) 里 
最 多 等 待 5 秒 。 如 果 5 秒 后 done 还 是 没有 被 调用 ， 当 前 的 测试 用 例会 被 标记 为 失败 ， 然 后 
Jasmine 继 续 执行 下 一 测试 步骤 。 

开发 人 员 可 以 修改 全 局 的 默认 超时 时 间 《〈 例 如 修改 为 2? 秒 ) ， 代 码 如 下 : 


jasmine.DEFAULT TIMEOUT INTERVAL = 2000; 


或 者 在 beforeAll、afterAll、beforeEach、afterEach 和 it 这 些 函 数 中 传 入 一 个 额外 的 超时 
设置 ， 单 独 调整 这 一 步骤 的 超时 时 间 。 例 如 : 


beforeEach (function (done) { 
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setTimeout (function () { 
value = 0; 
done (); 

}, 1000); 


}, 2000); 





® 如 果 想 要 手工 标记 测试 用 例 为 失败 ， 可 以 调用 done fail0) 函 数 。 





了 解 了 Jasmine 对 测试 异步 代码 的 支持 后 ， 前 面 Engine_spec.js 里 的 测试 用 例 就 可 以 改 
写 为 : 


beforeEach (function (done) { 
el = $('#fade-div'); 
engine = new Enginel(el); 
engine.start (function () { 
done(); 
Ds; 


yy 


在 本 示例 中 ，fadeOut (engine.start) 可 以 接受 外 部 输入 的 回调 函数 ， 所 以 在 回调 函数 里 
调用 done 告 诉 JasminefadeOut 已 经 执行 完毕 ， 可 以 接 下 来 执行 下 一 步骤 (it 块 ) 进 行 验证 。 

如 果 fadeOut 或 engine.start 不 接受 外 部 的 回调 函数 ， 那 么 可 以 使 用 setTimeout 或 
setInterval 延 迟 一 段 时 间 再 进行 验证 ?。 示 例 代 码 如 下 : 


it('should work with a visual effect', function (done) { 
setTimeout (function() { 
expect (el.css ("display")) .toBe ("none"); 
done(); 
}, 2000); 


Ds; 


© sheelc. testing fadeOutO method[OL]. 2014. https://github.com/jasmine/jasmine/issues/516. 
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4.6.2 模拟 JavaScript Timeout 相 关 函 数 


虽然 以 上 方法 可 以 测试 异步 代码 ， 但 是 单元 测试 需要 尽 可 能 地 快速 运行 ， 如 果 测 试用 
例 中 频繁 出 现 setTimeout 或 setInterval， 那 么 大 量 时 间 会 被 浪费 在 等 待 上 ， 造 成 测试 效率 低 
下 。 为 此 Jasmine 提 供 了 一 个 虚拟 时 钟 ， 模 拟 JavaScript Timeout 相 关 函 数 。 

为 了 演示 Jasmine 的 虚拟 时 钟 ， 先 在 Engine.js 里 为 Engine 添 加 一 个 新 方法 : 





Engine.prototype.pausel0seconds = function(cb) { 


setTimeout (ch, 10000); 


虽然 可 以 按 前 面 所 述 的 方案 在 pausel0seconds 的 回调 函数 里 检验 测试 结果 ， 但 是 该 方 
法 需要 等 待 10 秒 ， 测 试 效 率 很 低 。 为 了 让 测试 时 间 “ 快 进 ”， 需 要 使 用 Jasmine 的 虚拟 时 
钟 。 其 用 法 是 : 

(1) 调用 jasmine.clock0.install 函 数 安装 这 个 虚拟 时 钟 (通常 在 beforeEach 里 〉。 

(2) 调用 jasmine.clock().tick 函 数 “ 快 进 ” 时 间 ， 这 个 函数 接受 的 参数 是 毫秒 数 。 然 
后 验证 回调 函数 的 结果 。 

(3) 测试 完毕 后 需要 调用 jasmine.clock(O.uninstall 函 数 邱 载 虚 拟 时 钟 〈 通 常 在 
afterEach 里 ) 。 

测试 用 例如 下 : 


describe('Clock Tests', function () { 
beforeEach (function () { 
jasmine.clock().install (); 
Ds; 
afterEach (function () { 
jasmine.clock() .uninstall (); 
Ds; 
it('should callback after 10 seconds', function () { 
var engine = new Engine(); 
var timerCallback = jasmine.createspy ("timerCallback"); 


engine.pausel0seconds (timerCallback); 
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jasmine.clock() .tick(8000); 
expect (timerCallback) .not .toHaveBeenCalled(); 
jasmine.clock() .tick(2050); 


expect (timerCallback) .toHaveBeenCalled (); 


Ds; 


以 上 示例 里 先 使 用 jasmine.createSpy 创 建 一 个 spy 函 数 ， 然 后 执行 被 测 代码 engine. 
pausel0seconds， 理 论 上 需要 等 待 10 秒 spy 函 数 才 会 被 执行 。 调 用 jasmine.clock().tick 先 “ 快 
进 ”8 秒 ， 这 时 验证 spy 函 数 没 有 被 调用 过 。 再 次 调用 jasmine.clock().tick“ 快 进 ”2 秒 多 ， 
此 时 虚拟 时 钟 已 经 过 了 10 秒 ，spy 函 数 执行 完毕 。 

此 示例 没有 使 用 done， 但 是 利用 Jasmine 虚 拟 时 钟 “ 快 进 ” 了 时 间 ， 使 得 setTimeout 和 
setInterval 的 回调 函数 以 同步 的 方式 被 执行 。 

Jasmine 虚 拟 时 钟 的 “ 快 进 ” 功 能 极 大 地 提高 了 单元 测试 的 效率 。 


4.7 Jasmine 插 件 


Jasmine 作 为 一 款 流行 的 JavaScript 单 元 测试 框架 ， 拥 有 大 量 可 以 扩展 Jasmine 功 能 的 插 
件 。 本 书 介绍 jasmine-ajax 和 jasmine-jquery 这 两 个 插件 。 


4.7.1 jasmine-ajax 


JavaScript 应 用 经 常 使 用 Ajax 将 数据 发 送 给 远程 服务 器 并 接收 服务 器 的 响应 结果 。 单 
元 测试 需要 隔离 实际 的 服务 器 ， 并 且 控 制 Ajax 调 用 的 返回 结果 。 为 此 Jasmine 提 供 插件 
jasmine-ajaxe 来 截获 Ajax 请 求 并 模拟 返回 结果 。 

1. 安装 jasmine-ajax 库 

使 用 npm 命 令 安装 jasmine-ajax 库 。 


C:\jasmine-demo>npm install --save-dev jasmine-ajax 


Q@® Pivotal Labs. jasmine-ajax - A library for faking Ajax responses in your Jasmine suite[OL]. 2015. https:// 
github.com/jasmine/jasmine-ajax. 
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安装 完毕 后 目录 结构 如 下 : 


-- jasmine-demo 
+-- node modules 
| +-- jasmine-ajax 


| +-- jasmine-core 


1 +-- jquery 
+-- SC 
+-- spec 


2. 引用 jasmine-ajax 库 
jasmine-ajax 库 文件 是 mock-ajax.js。 为 了 使 用 jasmine-ajax 插 件 ， 需 要 在 测试 执行 页 面 
jasmine-demo\spec\Plugin\SpecRunner.html 里 引用 mock-ajax.js。 其 代码 如 下 : 


<script src="../../node modules/jasmine-ajax/lib/mock-ajax.js"></script> 


3. 初始 化 和 和 扼 载 jasmine-ajax 

如 果 要 测试 Ajax 调 用 ， 需 要 预先 调用 jasmine.Ajax.install 进 行 初始 化 (通常 在 
beforeEach 里 ) ， 替 换 XMLHttpRequest 对 象 。XMLHttpRequest 是 现代 浏览 器 内 建 对 象 ， 
Ajax 调用 就 是 通过 XMLHttpRequest 对 象 和 后 端 服务 器 进行 数据 交换 。XMLHttpRequest 对 
象 被 替换 后 ， 当 前 页 面 的 Ajax 调用 都 会 被 jasmine-ajax 所 截获 。 

测试 完毕 后 需要 调用 jasmine.Ajax.uninstall 以 卸载 jasmine-ajax (通常 在 afterEach 中 ) ， 
恢复 原 有 的 XMLHttpRequest 对 象 。 


describe('jasmine-ajax', function () { 
beforeEach (function () { 
jasmine.Ajax.install (); 
Ds; 
afterEach (function () { 


jasmine.Ajax.uninstall (); 
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4. 模拟 Ajax 返回 结果 
jasmine-ajax 截 获 Ajax 请 求 后 ， 即 可 用 于 在 任意 时 间 调 用 respondWith 函 数 返回 的 结 
果 。 示 例 代码 如 下 : 





以 上 示例 先 创建 一 个 spy 函 数 doneFn 作 为 Ajax 调用 结束 的 回调 函数 ， 然 后 测试 用 
例 发 出 一 个 Ajax 请 求 。 当 然 这 个 请 求 会 被 jasmine-ajax 截 获 ， 使 用 jasmine.Ajax.requests. 
mostRecent 获 取 这 个 请 求 对 象 。 示 例 代码 如 下 : 
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jasmine.Ajax.requests 会 返回 RequestTracker 对 象 。 以 上 示例 使 用 了 
ImostRecent 成 员 有 函数 ， 其 他 成 员 可 以 参考 mock-ajax.js 里 的 实现 完成 : 


function RequestTracker() { 
var requests = []; 
this.track = function(request) { 
® requests.push (request); 
] 


this.first = function() { 


return requests[0]; 








从 这 个 请 求 对 象 的 属性 如 url、method、data() 等 可 以 获得 Ajax 请 求 的 相关 信息 。 此 时 
spy 函 数 doneFn 还 没有 被 调用 ， 因 为 此 时 还 没有 设置 返回 结果 。 
调用 请 求 对 象 的 respondWith 函 数 可 以 设置 返回 结果 。 本 示例 设置 了 状态 代码 
(status) 、 内 容 类 型 (contentType) 以 及 返回 文本 (responseText) 。 最 后 验证 spy 函 数 
doneFn 已 被 调用 。 
除了 利用 responseWith 函 数 在 需要 的 时 候 返 回 指定 内 容 ， 也 可 以 预先 设置 条 件 。 一 旦 
Ajax 请 求 符合 这 个 条 件 ，jasmine-ajax 会 立即 返回 预 设 结果 。 示 例 代码 如 下 : 





it('should allow responses to be setup ahead of time', function () { 
Var doneFn = jasmine.createSpy('success'); 
jasmine.Ajax.stubRequest ('/another/url') .andReturn({ 
'responseText': 'immediate response' 
Ds; 
Var xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function (args) { 
if (this.readyState == this.DONE) { 


doneFn (this.responseText); 





| 94 | Web 前 端 测 试 与 集成 一 一 Jasmine/Selenium/Protractor/Jenkins 的 最 佳 实践 


}; 
xhr.open('GET', '/another/url'); 
xhr.send(); 


expect (doneFn) .toHaveBeenCalledWith('immediate response'); 


Ds; 


上 面 的 示例 中 使 用 了 stubRequest 函 数 设 置 条 件 ， 这 样 一 旦 有 Ajax 请 求 访问 '/another/ 
url，jasmine-ajax 立 即 返回 指定 结果 ， 即 如 下 代码 的 作用 。 


jasmine.Rjax.stubRequest("/another/ur1l') .andReturn({ 


"responseText': 'immediate response' 


4.7.2 jasmine-jquery 


除了 测试 异步 代码 ， 前 端 JavaScript 单 元 测试 的 另外 一 个 难点 是 测试 DOM 操 作 。 其 难 
点 表现 在 以 下 两 个 方面 : 

1) 加 载 并 清除 测试 所 需 的 DOM 元 素 

为 了 加 载 测试 所 需 的 DOM 元 素 ， 需 要 预先 在 SpecRunner.html 文 件 里 准备 DOM 元 素 。 
例如 为 前 面 示例 测试 Engine.start 函 数 准 备 了 需要 淡出 的 元 素 : 


<body> 
<div id="fade-div">some content</div> 


</body> 


或 者 在 测试 用 例 里 动态 添加 以 下 代码 : 


$('body') .append('<div id="fade-div">some content</div>'); 


但 是 这 样 写 代码 非常 烦琐 ,而 且 当 测试 用 例 执 行 完毕 后 ， 必 须 手工 清除 这 些 DOM 元 
素 ， 恢 复 测试 环境 ， 以 免 影响 其 他 测试 用 例 的 运行 。 
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2) 验证 DOM 元 素 的 变化 
执行 被 测 代码 后 需要 验证 DOM 元 素 的 变化 。 示 例 代码 如 下 : 


expect (el.css("display")) .toBe ("none"); 


但 是 Jasmine 内 建 的 断言 库 并 没有 提供 对 DOM 的 特殊 支持 。 针 对 这 个 问题 ，jasmine- 
jquery 插件 提供 了 API 来 帮助 加 载 并 自动 清除 HTML、CSS 和 JSON 对 象 ， 同 时 它 提供 非常 
强大 的 自 定义 匹配 器 ， 简 化 对 DOM 条 件 的 断言 。 本 书 主要 介绍 HTML 对 和 象 的 加 载 。 如 果 
读者 对 CSS 等 技术 感 兴 趣 ， 可 以 参考 此 网 址 https://github.com/velesin/jasmine-jquery 的 相关 
内 容 。 

1. 安装 jasmine-jquery 库 

使 用 npm 命 令 安装 jasmine-jquery 库 。 


C:\jasmine-demo>npm install --save-dev jasmine-jquery 


安装 完毕 后 目录 结构 如 下 : 


-- jasmine-demo 
+-- node modules 
| +-- jasmine-ajax 
| +-- jasmine-core 


| +-- jasmine-jquery 


| +-- jquery 
+-- src 
+-- spec 


2. 引用 jasmine-jquery 库 
jasmine-jquery 的 库 文件 是 jasmine-jquery.js。 在 测试 执行 页 面 jasmine-demo\spec\Plugin\ 
SpecRunner.html 里 引用 jasmine-jqueryjs 的 代码 如 下 : 


<script src="../../node modules/jasmine-jquery/lib/jasmine-jquery.js"></script> 


Q® Wojciech Zawistowski. jQuery matchers and fixture loader for Jasmine framework[OL]. 2015. https://github. 
com/velesin/jasmine-jquery. 
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3. 加 载 HTML DOM 元 素 
在 jasmine-demo\src\Plugin\domfunctions.js 中 准备 一 个 JavaScript 函 数 用 来 改变 DOM 元 
素 里 的 内 容 ， 作 为 被 测 代码 : 


/* domfunctions.js */ 
function changeContainerText (txt) { 
if (typeof txt === "undefined") { 
txt = 'hello world'; 
} 


$("#container") .上 text (txt); 


所 以 在 测试 执行 页 面 jasmine-demo\spec\Plugin\SpecRunner.html 里 引用 这 个 js 文件 : 


<script src="../../src/Plugin/domfunctions.js"></script> 


测试 这 个 函数 需要 准备 一 个 id 是 container 的 div。jasmine-jquery 提 供 了 多 种 方式 加 载 
DOM 元 素 ， 如 表 4-6 所 示 。 
表 4-6 jasmine-jquery HTML DOM 加 载 函 数 
描 述 
从 一 个 或 多 个 文件 中 加 载 DOM 元 素 ， 并 附加 到 新 容器 中 


和 1loadFixtures 一 样 ， 但 是 会 把 加 载 的 DOM 元 素 附加 在 已 
存在 的 容器 里 


从 一 个 或 多 个 文件 加 载 DOM 元 素 ， 但 是 不 把 它们 加 到 容 
器 里 ， 而 是 返回 字符 串 


将 HTML 代 码 片段 附加 到 新 容器 中 
将 HIML 代 码 片段 附加 在 已 存在 的 容器 里 


全 局 函数 名 
loadFixtures(fixtureUrl[, fxtureUrl…]) 


appendLoadFixtures(fixtureUrl[, fixtureUrl, …] 


TeadFixtures(fixtureUrl[, fxtureUrl …]) 





setFixtures(html) 








appendSetFixtures(html) 


表 4-6 提 到 的 “容器 ” 指 的 是 执行 单元 测试 时 jasmine-jquery 会 在 测试 执行 
页 面 SpecRunnerhtml 里 动态 创建 id 为 jasmine-fxtures 的 div 元 素 : 


<div id="jasmine-fixtures"> </div> 
jasmine-jquery 加 载 的 DOM 元 素 会 被 插入 到 这 个 div 元 素 里 。 
这 个 “容器 ”在 测试 用 例 结束 后 会 被 自动 清除 ， 不 会 影响 下 一 个 测试 用 
例 的 运行 。 
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表 4-6 里 的 全 局 函数 都 是 jasmine.getFixtures0) 返 回 对 象 里 的 成 员 函 数 的 简化 
形式 : 


loadFixtures () 一 jasmine.getFixtures() .10ad () 
appendLoadFixtures () 一 jasmine.getFixtures() .appendLoad() 
readFixtures () 一 jasmine.getFixtures() .read() 
setFixtures() 一 jasmine.getFixtures().set() 


appendSetFixtures () 一 jasmine.getFixtures () .appendSet () 











使 用 setFixtures 函 数 直接 加 载 HTML 代码 片段 


describe('setFixtures', function () { 
beforeEach(function () { 
setFixtures('<div id="container"></div><button id="btn" onclick="changeContainer 
Text () ">Click</button>')7 
]) 7 


]) 


如 果 HTML 片段 比 较 长 的 话 ， 可 以 将 HTML 片段 保存 到 文件 中 〈 例 如 将 以 上 setFixtures 
函数 里 的 片段 保存 到 jasmine-demo\spec\Fixtures\PluginFixture.html 文 件 ) ， 调 用 loadFixtures 
函数 进行 加 载 : 


describe('loadFixtures', function () { 

beforeEach (function () { 
Var path = ' 7 
if (typeof window. karma_ !== "undefined') { 

path += "base'7 

} 
jasmine.getFixtures() .fixturesPath = path + '/spec/Fixtures'; 
loadFixtures('PluginFixture.html'); 

]) 7 


Ds; 





© 
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jasmine-jquery 上 默认 会 从 spec/javascripts/fixtures 目 录 加 载 HTMIL 文 件 。 这 个 
上 默认 路 径 可 以 被 修改 ， 例 如: 


jasmine.getFixtures () .fixturesPath = 'my/new/path'; 


注意 : 如 果 在 单元 测试 里 使 用 Karma 的 话 ， 测 试 文件 会 从 base/ 目 录 里 被 访 
问 ， 所 以 修改 jasmine-jquery 默 认 路 径 时 需要 加 上 base/ 前 缓 : 


jasmine.getFixtures () .fixturesPath = "base/my/new/path'7 











loadFixture 函 数 会 使 用 Ajax 调用 来 加 载 HTML 文件 ， 因 为 浏览 器 默认 不 允许 Ajax 加 载 
本 地 文件 。 如 果 在 本 地 直接 打开 SpecRunnerhtml 文 件 ， 以 上 的 示例 将 无 法 运行 ， 所 以 需要 使 
用 一 个 HTTP 服 务 器 ， 并 且 将 HTTP 服 务 器 的 根 目录 设 为 jasmine-demo。 这 样 通过 HTTP 服 务 
器 访问 SpecRunner.html， 即 可 使 loadFixture 成 功 加 载 /Spec/Fixtures/PluginFixture.html。 
使 用 npm 命 令 可 以 全 局 安装 一 个 简易 的 HITP 服务 器 : 


npm install http-server -9 


然后 在 命令 控制 台 将 当前 目录 切换 到 jasmine-demo， 运 行 以 下 命令 : 


http-server 


这 个 简易 HTTP 服 务 器 默认 使 用 8080 端 口 ， 所 以 需 访问 http://localhost:8080/spec/plugin/ 
specrunner.html 进 行 单元 测试 。 


© 








jasmine-ajax 会 截获 所 有 的 Ajax 请 求 ， 而 jasmine-jquery 的 loadFixture 会 调用 
Ajax 加 载 HTML 文 件 ， 所 以 当 两 者 一 起 使 用 的 时 候 ， 必 须 先 调用 loadFixture， 
然后 再 初始 化 jasmine-ajax。 例 如 : 


beforeEach (function(){ 
// first load your fixtures 
loadFixtures ('fixture.html'); 
// then install the mock 
jasmine.Ajax.install (); 


Mi 
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4. 验证 DOM 元 素 的 变化 
jasmine-jquery 为 jQuery 框架 提供 了 大 量 自 定 义 匹 配器 ， 如 表 4-7 所 示 。 为 了 测试 以 上 示 
例 里 changeContainerText 函 数 是 否 更 改 DOM 成 功 ， 可 以 使 用 以 下 的 测试 用 例 : 


it('container should have hello world text', function () { 
expect ($('#btn')).togExist(); 
$('#btn') .trigger('click'); 


expect ($('#container')) .toHaveText ('hello world'); 


表 4-7 ”常用 jasmine-jquery 自 定义 匹配 器 
匹配 器 描述 
验证 元 素 是 否 被 选中 ， 只 针对 有 checked 属 性 的 元 素 。 例 如 : 


全 de expect($('<input type="checkbox" checked="checked"/>)).toBeChecked0) 
toBeDisabled0 验证 元 素 是 否 被 禁用 

toBeEmpty0 验证 元 素 是 否 有 子 元 素 或 内 容 
| 


验证 元 素 是 否 被 隐藏 。 以 下 几 种 情况 可 以 认为 元 素 被 隐藏 : 
。 CSS 的 display 值 为 none 

toBeHidden() 。 form 元 素 的 类 型 为 hidden 

。 元 素 的 宽度 和 高 度 都 设 为 0 

。 上 级 元 素 是 隐藏 的 ， 所 以 元 素 不 会 被 显示 





toBeVisible() 验证 元 素 是 否 可 见 
验证 元 素 是 否 包含 指定 字符 串 。 例 如 : 

toContain(string) expect($('<div><span class="some-class"></span></div>)) 
.toContain('some-class) 

toExist() 验证 元 素 是 否 存 在 





验证 元 素 是 否 能 处 理 指定 事件 。 例 如 : 
e.g. expect($form).toHandle("submit") 


验证 元 素 是 否 有 指定 的 CSS class。 例 如 : 


expect($('<div class="some-class"></div>')).toHaveClass("some-class") 


toHaveText(string) 验证 元 素 是 否 有 指定 文本 或 符合 正则 表达 式 


toHandle(eventName) 





toHaveClass(className) 

















读者 可 以 访问 https://github.com/velesin/jasmine-jquery 了 解 更 多 的 jasmine-jquery 匹 
配器 。 
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4.8 ”基于 浏览 器 调试 


使 用 Jasmine 进 行 单元 测试 时 ， 测 试用 例 是 运行 在 浏览 器 里 的 ， 所 以 测试 用 例 代码 和 
前 端 JavaScript 代 码 一 样 ， 都 可 以 使 用 浏览 器 进行 调试 。 

现代 浏览 器 都 内 建 开发 者 工具 ， 帮 助 开发 者 调试 前 端 程序 。 以 Chrome 为 例 ， 可 以 使 
用 快捷 键 Shift+Ctrl+I 启 动 开发 者 工具 。〈 启 动 下 开发 者 工具 的 快捷 键 是 F12) 

Chrome 开 发 者 工具 除了 具有 断 点 设置 、 删 除 ， 单 步调 试 等 基本 功能 以 外 ， 还 在 Source 
标签 页 (参见 图 4-15) 提供 了 以 下 几 种 常用 的 调试 功能 : 





图 4-15 “Chrome 开发 者 工具 Source 标 签 页 


1) 自动 异常 断 点 

这 个 功能 开启 后 ， 当 JavaScript 代 码 发 生 异 常 时 ， 会 在 异常 发 生 处 暂停 运行 ， 供 开发 
人 员 查 找 异常 产生 的 原因 。 

2) DOM 变 化 和 XHR 断 点 

这 两 项 功能 可 以 对 DOM 结 构 改变 /属性 改变 等 设置 断 点 ， 也 可 以 对 Ajax 请 求 设置 断 点 。 

3) 事件 断 点 

此 功能 可 对 某 个 事件 〈 例 如 鼠标 单 击 ) 设置 断 点 。 

4) 调用 堆栈 分 析 

此 功能 可 列 出 当前 的 调用 堆栈 。 
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5) 实时 代码 编辑 

代码 编辑 区 可 用 于 在 运行 时 动态 改变 JavaScript 代 码 。 

在 进行 JavaScript 应 用 开发 的 过 程 中 ， 开 发 人 员 会 添加 必要 的 调试 日 志 输 出 语句 ， 方 
便 进 行 问题 定位 。 这 些 日 志 信息 可 以 在 Console 标签 页 内 找到 ， 并 且 能 通过 单 击 该 日 志 
末端 文件 链接 直接 跳 转 到 Source 标 签 页 的 源 文件 中 ， 极 大 方便 了 相关 代码 的 定位 。 

Network 标 签 页 〈 参 见 图 4-16) 列 出 了 所 有 的 HTTP 请 求 ， 以 方便 用 户 查看 请 求 内 容 、 
HITP 头 、 请 求 时 间 等 信息 。 


民 旬 | elements Console Sourc. Netwo.， Timeline Profiles ”Applicat Security Audits 





和 @| 相 可 View 汪 三 | 国 Preservelog 国 Disablecache | 上 园 ofine No throtting 宙 

[Fer 目 Regex 目 Hidedata uls 图 | xhg Js css Ime Media Font poc Ws Manifest other 
| 100ms 200ms 300ms 400ma S00m:s S00ms 700ms g00ms 900ms 10 
Name Status Type Initiator Size Time 
口 beotjs Finishe script SpecRunnerhtml?spec=Engine 08 4ms 
javeyminjs Finished script SpecRunnerhtml?spec=Engine . 08 4ms 
日 reronjs Finished script SpecRunner.html?spec=Engine .. OB 4ms 
nginejs Fimsher script SpecRunnerhtml?spec =Engine 0B 4ms 
日 ngine specjs Finished script SpecRunnerhtml?spec=Engine .. 08 3ms 


10 requests 10Btransferred | Finish: 172 ms 


图 4-16 Chrome 开 发 者 工具 Network 标 签 页 


如 果 想 要 了 解 更 多 Chrome 开 发 者 工具 的 信息 ， 可 以 访问 https://developers.google.comy/ 
web/tools/chrome-devtools/。 


第 5 章 
单元 测试 执行 工具 Karma 
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前 端 开 发 人 员 进行 JavaScript 单 元 测试 ， 一 般 需 要 执行 以 下 步骤 : 添加 或 修改 测试 
用 例 代 码 ; 维护 测试 执行 页 面 〈 例 如 Jasmine 里 的 SpecRunnerhtml) ， 当 添加 了 一 个 新 的 
JavaScript 源 文件 时 ， 需 要 在 SpecRunnerhtml 里 引用 该 文件 和 相应 的 测试 文件 ， 手 动 刷 新 浏 
览 器 (有 时 候 还 需要 清空 浏览 器 缓存 ) ， 如 果 JavaScript 代 码 要 在 不 同 浏览 器 内 测试 ， 那 
么 需要 分 别 刷新 各 个 浏览 器 ; 在 浏览 器 内 查看 测试 结果 。 

这 个 过 程 需 循环 反复 ， 使 得 开发 人 员 在 无 关 代 码 的 工作 上 花费 太 多 精力 ， 降 低 了 工作 
效率 。 测 试 执行 工具 可 帮助 开发 人 员 从 维护 SpecRunner.html、 刷 新 浏览 器 等 机 械 重 复 的 事 
情 中 解放 出 来 ， 真 正 把 关注 点 放 到 编写 测试 、 运 行 测试 、 重 构 等 工作 上 来 。 

本 章 将 介绍 流行 的 测试 执行 工具 Karma?， 内 容 包 括 : 

初 识 Karma 

安装 Karma 和 相关 插件 
Karma 的 配置 

基于 Karma 的 调试 

前 端 自动 化 任务 构建 工具 
Karma 和 gulp 集 成 


5.1 初 识 Karma 


Karma 是 Google 为 AngularJS 开 发 的 测试 执行 工具 。 它 不 仅 可 以 测试 AngularJS 程 序 ， 还 


@® Friedel Ziegelmayer Karma - Spectacular Test Runner for Javascript[OL]. [2016]. http://karma-runner. 
github.io. 
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被 广泛 用 于 测试 前 端 JavaScript 程 序 。 
Karma 的 设计 目的 主要 有 以 下 4 点 : 
@ 快速 高 效 
@ 可 靠 
@ 运行 于 真实 的 浏览 器 里 
@ 无 颖 的 使 用 流程 
Karma 是 一 个 典型 的 C/S 架 构 程 序 ， 包 括 服务 器 和 客户 端 ， 如 图 5-1 所 示 。 














































































































































































































Server Client 
S Watcher Manager ki--- | SOCKET | = Manager Code under 
TCP/IP Test 
HITP Testing 
eporter Jeb Server k++---J--------] FF woe Test Code 
图 5-1 Karma 架 构 


运行 的 时 候 ，Karma 会 启动 一 个 基于 Node.js 的 Web 服 务 器 程序 。 浏 览 器 (客户 端 ) 可 
以 访问 Karma 服 务 器 监听 的 URL (默认 是 http://localhost:9876/) 和 服务 器 建立 连接 。 这 些 
和 服务 器 建立 了 连接 的 浏览 器 就 成 为 了 受 控 的 客户 端 。 

根据 测试 配置 文件 ，Karma 服 务 器 能 向 客户 端 提供 所 需 的 测试 文件 ， 让 测试 用 例 在 所 
有 受 控 的 客户 端 运行 。 测 试 结束 后 ， 客 户 端 将 测试 用 例 执行 结果 传 回 服务 器 ， 由 服务 器 输 
出 结果 给 开发 人 员 (默认 在 命令 控制 台 ，。 使 用 Karma， 开 发 人 员 不 需要 维护 SpecRunner. 
html， 也 不 用 离开 集成 开发 环境 去 各 个 浏览 器 查看 测试 结果 。 

服务 器 会 监视 本 地 源码 或 测试 文件 的 更 改 。 一 旦 有 更 新 ， 它 会 通知 受 控 的 客户 端 
(浏览 器 ) ， 让 客户 端 重新 加 载 测试 代码 进行 测试 。 这 样 开 发 人 员 就 无 需 再 手动 来 刷新 浏 
览 器 了 。 

简 而 言 之 ， 使 用 Karma， 开 发 人 员 可 以 简单 而 又 快速 地 在 不 同 浏览 器 中 进行 自动 化 单 
元 测试 。 如 果 想 要 了 解 更 多 Karma 的 设计 思想 ， 请 参阅 Karma 作 者 的 硕士 论文 ?。 


QO Vojtech Jina. JavaScript Test Runner[OL]. 2013. https://github.com/karma-runner/karma/raw/master/thesis. 
pdf. 
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5.2 安装 Karma 和 相关 插件 


5.2.1 安装 Karma 


Karma 是 Node.js 程 序 ， 所 以 需 在 项 目 目录 下 使 用 npm 命 令 进行 本 地 安装 : 


C:\jasmine-demo>npm install --save-dev karma 


安装 完毕 后 可 以 在 命令 控制 台 输 入 以 下 命令 启动 Karma: 


C:\jasmine-demo>node .\node modules\karma\bin\karma start 
26 11 2016 14:52:54.758:WARN [karma]: No captured browser, open http://localhost:9876/ 
26 11 2016 14:52:54.769:INFO [karma]: Karma vl.3.0 server started at http:// 


localhost:9876/ 


使 用 浏览 器 访问 http://localhost:9876， 和 服务 器 建立 连接 ， 如 图 5-2 所 示 ， 然 后 就 可 以 
接受 并 执行 服务 器 向 它 发 送 的 指令 〈 在 命令 控制 台 按 快捷 键 Ctrl+C 可 停止 服务 器 ) 。 


吉 o 
\ 


‘ Karma v1.3.0 - connected DEBUG 


Chrome 54.0.2840 (Windows 10 0.0.0) Is idle 





图 5-2” 受 控 的 Karma 客 户 端 ( 浏览 器 ) 
由 于 调用 node .node_modules\karma\bin\karma 来 执行 Karma 不 太 方 便 ， 所 以 通常 会 使 
用 下 面 的 命令 安装 一 个 全 局 的 命令 行 接口 : 


C:\jasmine-demo>npm install karma-cli -g 


安装 了 全 局 的 命令 行 接口 后 可 以 直接 执行 以 下 命令 启动 Karma 服 务 器 : 


C:\jasmine-demo>karma start 
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5.2.2 ”安装 插件 


Karma 的 扩展 性 好 ， 很 多 功能 是 通过 插件 方式 实现 的 。 插 件 是 npm 软 件 包 ， 所 以 要 使 
用 npm 命 令 安装 插件 : 


npm install karma-<plugin name> --save-dev 


Karma 启 动 时 会 加 载 所 有 名 字 以 kanma- 开 头 的 npm 软 件 包 。 

1. 浏览 器 启动 器 

Karma 在 启动 服务 器 时 ， 可 以 同时 通过 浏览 器 启动 器 插件 启动 浏览 器 2?， 这 些 浏览 器 
和 服务 器 建立 连接 ， 加 载 并 运行 测试 用 例 ， 它 们 也 是 要 测试 的 目标 环境 。 本 书 示例 安装 的 
是 Chrome 和 Firefox 的 启动 器 ， 命 令 如 下 : 


C:\jasmine-demo> npm install karma-chrome-launcher --save-dev 


C:\jasmine-demo> npm install karma-firefox-launcher --save-dev 


访问 网 址 https://www.npmjs.com/browse/keyword/karma-launcher 可 以 了 解 


更 多 的 启动 器 插件 。 


浏览 器 启动 器 插件 使 用 默认 路 径 寻 找 浏览 器 的 执行 文件 。 如 果 浏览 器 未 安装 在 默认 路 
径 处 ， 需 要 手动 设置 环境 变量 <BROWSER>_BIN， 例 如 : 





C:> SET FIREFOX BIN=C:\Program Files (x86)\Mozilla Firefox\firefox.exe 


2. 测试 框架 适配器 

Karma 支 持 Jasmine、QUnit、Mocha 等 多 种 测试 框架 。 为 了 使 用 这 些 测 试 框架 ， 
除了 安装 测试 框架 本 身 的 类 库 外 ， 还 需要 安装 相应 测试 框架 的 适配器 。 本 书 示例 使 用 
Jasmine， 所 以 安装 Jasmine 适 配器 ， 命 令 如 下 : 


C:\jasmine-demo> npm install karma-jasmine --save-dev 


3. 测试 报告 插件 
如 果 想 让 Karma 输 出 指定 格式 的 测试 结果 ， 例 如 JUnit 格 式 和 HTML 格 式 ， 需 要 安装 相 


个 ”Friedel Ziegelmayer Karma - Browsers[OL]. [2016]. http://karma-runner.github.io/1.0/config/browsers. 
html. 
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应 的 插件 ， 命 令 如 下 : 


C:\jasmine-demo> npm install karma-junit-reporter --save-dev 


C:\jasmine-demo> npm install karma-html-reporter --save-dev 


JUnit 是 一 种 基于 XML 的 报告 格式 ， 被 广泛 应 用 于 各 种 持续 集成 系统 内 ， 但 是 XML 格 
式 不 适合 直接 阅读 ， 所 以 一 般 同时 输出 HTML 格 式 的 报告 。 


5.3 Karma 的 配置 


5.3.1 ”生成 配置 文件 


虽然 安装 了 Karma， 但 它 还 不 知道 该 做 些 什 么 ， 开 始 测试 之 前 ， 开 发 人 员 需 要 在 项 目 
目录 下 创建 一 个 配置 文件 对 Karma 进 行 相关 设置 ， 命 令 如 下 : 


C:\jasmine-demo> karma init 


和 npm init 类 似 ， 这 个 命令 采用 互动 方式 ， 要求 用 户 回答 一 些 问 题 。 本 示例 使 用 的 都 
是 默认 设置 : 


Which testing framework do You want to use ? 

Press tab to list possible options. Enter to move to the next question. 

> jasmine 

Do you want to use Require.js ? 

This will add Require.js plugin. 

Press tab to list possible options. Enter to move to the next question. 

> no 

Do you want to capture any browsers automatically ? 

Press tab to list possible options. Enter empty string to move to the next question. 
> Chrome 


> 
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What is the location of your source and test files ? 

You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js". 

Enter empty string to move to the next question. 

> 

Should any of the files included by the previous patterns be excluded? 
You can use glob patterns, eg. "*#*/*#.swp". 

Enter empty string to move to the next question. 

Do you want Karma to watch all the files and run the tests on change ? 
Press tab to list possible options. 

> yes 


Config file generated at "C:\jasmine-demo\karma.conf.js". 


问题 回答 完毕 后 会 在 当前 目录 下 生成 karma.config.js 文 件 。 


karma.config.js 是 默认 的 配置 文件 。 如 果 想 要 让 karma init 生 成 其 他 配置 文 





件 ， 例 如 my.configjs， 可 以 执行 命令 karma init my.confjs。 


配置 文件 默认 使 用 的 是 JavaScript 代 码 ， 也 可 以 用 CoffeeScript 代 码 编写 。 如 果 运 行 
karma init， 后 面 跟 一 个 *.coffee 扩 展 的 文件 名 ， 例 如 karma init karma.conf coffee， 就 会 生成 
一 个 CoffeeScript 文 件 。 


5.3.2 配置 文件 的 说 明 


首先 运行 Karma start 命 令 启动 Karma 服 务 器 ， 这 同时 会 启动 一 个 Chrome 浏 览 器 和 服务 
器 连接 ， 开 始 进行 单元 测试 。 执 行 命令 及 输出 的 结果 如 下 : 


C:\jasmine-demo>karma start 

26 11 2016 20:19:04.768:WARN [karma]: No captured browser, open http://localhost:9876/ 

26 11 2016 20:19:04.778:INFO [karma]: Karma vl.3.0 server started at http:// 
localhost:9876/ 


26 11 2016 20:19:04.779:INFO [launcher]: Launching browser Chrome with unlimited 


concurrency 
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26 11 2016 20:19:04.789:INFO [launcher]: Starting browser Chrome 
26 11 2016 20:19:06.671:INFO [Chrome 54.0.2840 (Windows 10 0.0.0)]: Connected on socket 
/#K3zK1l1yYRBX4BPSPHAAAA with id 65015763 


Chrome 54.0.2840 (Windows 10 0.0.0): Executed 0 of 0 ERROR (0.002 secs / 0 secs 


以 上 的 输出 结果 里 显示 没有 测试 用 例 被 执行 ， 这 是 因为 还 没有 告诉 Karma 需 要 测试 哪 
些 代码 。 现 在 对 配置 文件 karma.config js 做 一 些 修改 。 
默认 情况 下 ，karma 会 依次 寻找 下 列 配置 文件 : 
® /karma.confjs 

® .karma.conf coffee 

® ® /config/karma.conf.js 

® /config/karma.conf.coffee 

如 果 需 要 让 karma start 使 用 其 他 配置 文件 ， 例 如 my.config.js， 可 以 执行 
karma start my.conf.js 命 令 。 


1. 常用 配置 项 
karma.configjs 本 身 是 一 个 Node.js 模 块 ， 内 容 如 下 : 











module.exports = function(config) { 
config.set({ 
basePath: '', 


frameworks: ['jasmine'], 


该 模块 调用 config.set 函 数 对 Karma 进 行 设置 。config.set 函 数 输入 参数 是 一 个 对 象 ， 其 
各 个 字段 就 是 用 户 可 以 调整 的 Karma 的 配置 。 常 用 的 配置 项 如 表 5-1 所 示 。 
表 5-1 常用 Karma 配 置 项 
配 置 项 | 类 型 黑 描 述 
根 目录 ， 用 来 解析 定义 在 files 和 exclude 里 的 相对 路 径 。 如 








basePath 果 basePath 本 身 是 一 个 相对 路 径 ， 那 么 它 会 被 解析 为 相对 于 
配置 文件 的 _ dimame 
要 使 用 的 测试 框架 列表 。 通 常 ， 用 户 会 设 定 为 [jasmine']、 
frameworks [mocha'] 或 [qunit]。 注 意 : 这 里 设置 的 所 有 框架 都 需要 额 











外 安装 插件 /框架 库 
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配置 项 描述 

需要 被 加 载 到 浏览 器 的 文件 列表 和 文件 模式 列表 ， 告 诉 
Karma 需 要 测试 哪些 文件 。 通 常 指 单元 测试 所 需要 的 源 文 
件 ， 测 试用 例 和 它们 的 依赖 文件 

例如 ['sre/**/*.js', 'spec/**/*.js']， 表 示 需 要 加 载 src 和 spec 目 
录 及 子 目 录 下 的 所 有 js 文件 

需要 从 files 中 排除 掉 的 文件 列表 

需要 做 预 处 理 的 文件 ， 以 及 这 些 文件 对 应 的 预 处 理 器 。 此 
处 设置 如 何 转换 CoffeeScript、ES6 等 代码 。 注 意 : 这 些 预 
处 理 器 (除了 CoffeeScript) 都 需要 额外 安装 类 库 

测试 结果 报告 插件 列表 。 本 书 实例 使 用 的 是 ['progress'， 
"unit, html] 

port 9876 Web 服 务 器 所 监听 的 端口 

在 输出 内 容 〈 报 告 插件 和 日 志 ) 中 启用 /禁用 颜色 

日 志 记录 级 别 。 可 用 值 为 

config LOG DISABLE 

config. LOG ERROR 


exclude 





人 本 二/ 本 Eee 
'coffee'} 


Ppreprocessors 





reporters ['progress'] 








colors 

















lophevel config LOG WARN 
config LOG INFO 
config.LOG DEBUG 

a Wath te et 功能 开启 时 ， 当 文件 发 生变 化 
Karma 自 动 启动 的 浏览 器 列表 ， 也 就 是 要 测试 的 目标 环境 。 
当 Karma 启 动 时 ， 它 会 同时 启动 列表 里 的 浏览 器 ， 当 Karma 
关闭 时 ， 它 也 会 关闭 列表 里 的 浏览 器 。 如 果 不 设置 这 个 配 
置 项 ， 也 可 以 手动 启动 浏览 器 : 访问 Karma 监 听 的 URL， 使 

DE 得 该 浏览 器 成 为 Karma 的 受 控 客户 端 ， 接 收 Karma 的 指令 
注意 ， 要 想 让 Karma 启 动 列表 里 的 浏览 器 ， 需 要 额外 安装 相 
应 的 浏览 器 启动 器 
本 书 实例 使 用 的 是 ['Chrome', 'Firefox']， 更 多 内 容 请 参阅 以 
下 网 址 : 
http://karma-runner.github.io/1.0/config/browsers.html 

ii 持续 集成 模式 。 如 果 设 为 tue， 则 Karma 会 启动 并 控制 浏览 

区 器 ， 运 行 测试 ， 然 后 退出 
concurrency 设置 Karma 可 以 同时 启动 浏览 器 的 数量 





如 果 要 了 解 更 多 的 配置 项 ， 可 以 访问 网 址 http://karma-runner.github.io/1.0/config/ 
configuration-file.html。 

2. Karma 加 载 的 文件 

Karma 不 使 用 SpecRunner.html 文 件 ， 所 以 需要 人 为 告诉 Karma 哪 些 文件 要 被 加 载 到 浏 
览 器 里 进行 测试 。 这 个 工作 由 配置 项 files 数 组 完成 。 

files 配 置 项 是 文件 模式 file pattem) 列表 。 如 果 文件 模式 是 相对 路 径 ，Karma 会 根据 
basePath 进 行 解 析 。 如 果 basePath 本 身 是 相对 路 径 ， 那 么 它 会 根据 配置 文件 所 在 的 目录 进行 
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解析 。 最 终 ， 所 有 的 模式 都 会 通过 glob? 对 应 到 文件 。 开 发 人 员 可 以 使 用 minimatch 表达 
式 作 为 文件 模式 来 匹配 和 定位 文件 。 例 如 : 

@ **/*js， 所 有 子 目录 中 以 js 结尾 的 文件 。 

@ **/I(jquery)js， 同 上 ,但 是 不 包括 “jqueryjs” 文 件 。 

@ **/(foolbar)js， 所 有 子 目 录 中 的 “foo.js” 或 “barjs” 文 件 。 

数组 里 各 项 模式 的 顺序 决定 了 文件 在 浏览 器 里 被 加 载 的 顺序 。 如 果 多 个 文件 匹配 到 同 

一 个 模式 ， 则 按 字 母 顺 序 加 载 。 每 个 文件 只 能 被 加 载 一 次 ， 如 果 同 一 文件 被 多 个 模式 匹配 
到 ， 那 么 文件 由 第 一 个 匹配 到 的 文件 模式 加 载 。 

文件 模式 可 以 是 一 个 字符 串 ， 也 可 以 是 一 个 有 以 下 5 个 属性 的 对 象 ; 

@ pattermn: 需要 匹配 的 文件 模式 字符 串 ， 必 须 提供 这 个 属性 。 

@ watched: 布尔 值 ， 默 认 值 是 true。 如 果 autoWatch 值 为 ttue， 所 有 watched 设 为 true 的 
文件 都 会 被 Karma 监 视 变化 。 

@ included: 布尔 值 ， 默 认 值 是 true。 文 件 是 否 应 该 被 浏览 器 用 <script> 标 签 引用 加 
载 。 如 果 文 件 是 程序 以 手动 方式 加 载 的 ， 例 如 通过 require.js， 则 可 将 该 值 设 为 
false。 

@ served: 布尔 值 ， 默 认 值 是 true。 文 件 是 否 可 以 通过 Karma 的 Web 服 务 器 访问 。 

@ nocache: 布尔 值 ， 默 认 值 是 false。 每 次 请 求 Karma 的 Web 服 务 器 是 否 都 要 到 磁盘 上 
读 取 。 

本 书 示例 中 使 用 的 是 以 下 files 配 置 项 : 

files: [ 

{pattern: 'spec/Fixtures/*.html', included: false, served: true, watched: false, 

nocache: true}, 

"node modules/jquery/dist/jquery.js', 

‘node modules/jasmine-jquery/l1ib/jasmine-jquery.js', 

‘inode modules/jasmine-ajax/1ib/mock-ajax.js', 

tsrc/#*/*.ja', 


‘spec/**#/*.js" 


@ IsaacZ. Schlueter glob functionality for node.js[OL]. [2016]. https://github.com/isaacs/node-glob. 
人 @) IsaacZ. Schlueter a glob matcher in javascript[OL]. [2016]. https://github.com/isaacs/minimatch. 
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其 中 ，spec/Fixtures/*.html 是 使 用 jasmine-jquery 的 loadFixtures 函 数 加 载 的 测试 所 需 


的 所 有 HTML 文 件 。 用 户 可 以 通过 http://localhost:9876/base/spec/Fixtures/[MY HTML]. 
html 获 取 该 文件 。 注 意 URL 里 的 base，karma 的 Web 服 务 器 将 服务 内 容 放 在 了 /base 虚拟 


目录 下 。 


中 


© 











目前 版 本 的 Karma Web 服 务 器 即使 是 在 Windows 系 统 下 也 是 大 小 写 敏感 
的 ， 所 以 一 定 要 注意 文件 名 称 的 大 小 写 。 


本 书 示例 里 直接 将 jquery.js、jasmine-jquery.js 和 mock-ajax.js 添 加 到 files 配 
置 项 ， 让 Karma 直 接 加 载 。 还 有 一 种 方法 是 使 用 相应 的 适配器 ， 例 如 : 
® karma-jquery: https://www.npmjs.com/package/karma-jquery。 
® karma-jasmine-ajax: https:/www.npmjs.com/package/karma-jasmine- 
ajax。 
® karma-jasmine-jquery: https://www.npmjs.com/package/karma-jasmine- 
jquery。 
虽然 适配器 本 身 包含 相 应 的 类 库 〈 例 如 karma-jquery 包 含 jQuery 库 ) ， 但 
是 这 些 适 配器 里 包含 的 类 库 版 本 和 测试 代码 使 用 的 类 库 版 本 可 能 不 一 致 ， 所 
以 本 书 示例 直接 引用 这 些 类 库 。 





3. 测试 报告 设置 
本 书 示例 安装 了 两 个 测试 报告 插件 karma-junit-reporter 和 karma-html-reporter， 用 于 生 
成 JUnit 和 HTML 格 式 的 结果 报告 。 这 两 个 报告 插件 需要 被 添加 在 reporters 配 置 项 里 ， 代 码 


如 下: 


reporters: 


['progress', "junit', ‘html'], 


它们 还 有 自己 的 配置 项 ， 例 如 : 


junitReporter: { 


}, 


outputDir: './report output', 
outputFile: "junitreport.xml', 


useBrowserName: false 


htmlReporter:{ 
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outputDir: './report output', 
reportName: "unit', 
namedFiles: true 


} 


这 些 配 置 项 的 解释 如 下 : 

@ outputDir: 报告 目录 。 

@ outputFile: JUnit 报 告 文件 名 。 

@ useBrowserName: 默认 情况 下 JUnit 报 告 保存 为 $outputDir/$SbrowserName/$outputFile， 
当 useBrowserName 值 设 为 false 时 ， 不 生成 SbrowserName 子 目录 。 

@ reportName: HTML 报告 名 。 

@ namedFiles: 如 果 其 值 设 为 true，reportName 就 是 报告 文件 名 ; 如 果 设 为 false， 则 
reportName 是 子 目录 ， 最 后 生成 的 报告 为 /report_output/unit/index.html。 

要 了 解 更 多 关于 测试 报告 插件 的 设置 ， 请 参阅 以 下 网 址 ; 

https://github.com/karma-runner/karma-junit-reporter 

https://github.com/dtabuenc/karma-html-reporter 

4. karma.conf.js 完 整 示例 

本 书 示例 的 karma.confjs 的 完整 代码 如 下 : 


// Karma configuration 
// Generated on Sat Nov 26 2016 17:38:03 GMT+0800 (China Standard Time) 
module.exports = function (config) { 
config.set({ 
// base path that will be used to resolve all patterns 
// (eg。files，exclude) 
basePath: ' 
// frameworks to use 
// available frameworks: 
// https://npmjs.org/browse/keyword/karma-adapter 
frameworks: ['jasmine'], 


// list of files / patterns to load in the browser 
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在 项 目 根 目 录 中 执行 karma start 命 令 ， 结 果 将 显示 在 命令 控制 台 : 总 共有 46 个 测试 用 
例 ， 略 过 4 个 被 禁用 的 测试 用 例 ， 在 Chrome 和 Firefox 中 分 别 执行 42 个 ， 如 图 5$-3 所 示 。 
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Karma x 吕 


| 所 localhost 


Karma v1.3.0 - conmevecu 
Chrome 54.0.2840 (Windows 10 0.0.0) is idle 
Firefox 47.0.0 (Windows 10 0.0.0) is idle 


所 © | © localhost 


| 

Karma v1.3.0 - connected 
Chrome 54.0.2840 (Windows 10 0.0.0) is idle 
Firefox 47.0.0 (Windows 10 0.0.0) is idle 








图 5-3 ” Karma 命令 控制 台 输出 的 结果 


Karma 运 行 结束 后 会 在 C:jasmine-demo\report_output 目 录 下 生成 相关 格式 的 报告 。 


5.4 基于 Karma 的 调试 


在 Karma 环 境 下 调试 前 端 JavaScript 代 码 与 测试 用 例 代 码 和 通常 的 前 端 调试 略 有 不 同 。 


在 Kamma 环 境 下 调试 代码 的 步骤 如 下 : 


(1) 确保 配置 文件 里 的 singleRun 配 置 项 为 false， 这 样 运行 测试 后 浏览 器 不 会 自动 


(2) 运行 karma start 命 令 启动 Karma 服 务 器 以 及 浏览 器 。 


(3) 单 击 浏览 器 页 面 里 的 DEBUG 按 钮 ， 切 换 至 调试 模式 。 (或 者 直接 访问 网 址 





http:/localhost:9876/debug.html) 


(4) 启动 浏览 器 里 的 开发 者 工具 ， 在 代码 里 设置 断 点 。 











(5) 刷新 页 面 ， 触 发 断 点 。 


(6) 接 下 来 就 可 以 进行 单 步 执行 、 查 看 变量 等 常规 的 调试 工作 ， 如 图 $-4 所 示 。 
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KKarma DEBUGRUNNER x 











四 oO x 
CG © localhost9876/debughtml 家 
Mm 147pX x 各 7M | 民 加 | Bements Console Sources Network Timeiine Profies Apphcaton Seauiy Audis wl 3 x 
Wentscr Snippets 二 | 回 pugn specjs x PattmOlan 
@ Saving hom he He mystom?t Adkd your Sles to th weispece, mm 2 
可 


ever show x ¥ Watch 
cal stack 








4 
{} Line 76, Column 13 


图 5-4 ”基于 Karma 的 调试 


5.5 ”前端 自动 化 任务 构建 工具 


使 用 Karma 进 行 单元 测试 只 是 软件 自动 化 构建 的 其 中 一 个 任务 ， 整 个 自动 化 构建 流水 
线 如 图 5-5 所 示 。 





开发 分 析 测试 构建 部 署 


图 5-5 ”自动 化 构建 流水 线 
前 端 开发 人 员 平 时 需要 重复 进行 测试 、 检 查 、 合 并 、 压 缩 、 格 式 化、 浏览 器 自动 刷 
新 、 部 署 文 件 生成 等 步骤 。 所 以 借助 前 端 开发 自动 化 任务 构建 工具 ， 开 发 人 员 只 要 在 配置 


文件 里 正确 设置 好 任务 ， 任 务 构建 工具 就 能 自动 完成 大 部 分 重复 的 常见 任务 ， 从 而 简化 工 
作 ， 提 升 开发 效率 。 


5.5.1 gulp 和 Grunt 


如 今 提 到 前 端 自动 化 任务 构建 工具 ， 总 会 想起 gulp 和 Grunt。 这 两 个 工具 都 是 基于 
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Node.js 的 ， 主 要 特点 如 表 5-2 所 示 。 

表 5-2 ”Grunt 和 gulp 比 较 
| Grunt gulp 
[一切 任务 基于 配置 (配置 即 任务 )， 配 置 比较 复杂 | 代码 优 于 配置 。 任 务 通 过 代码 设置 ， 可 读 性 较 高 
LO 操作 基于 临时 文件 IO 操作 基于 流 (stream based) 


约 6000 个 插件 〈 本 书写 作 时 ) 2700 多 个 插件 〈 本 书写 作 时 ) 

















1. 易 用 
gulp 比 Grunt 更 简洁 ， 而 且 遵循 代码 优 于 配置 策略 ， 维 护 gulp 更 像 是 写 代码 。 例 如 : 


gulp.task('js', function () { 
return gulp 
CC 
.pipe (jshint ()) 
.pipe (concat ('all.js')) 
.pipe (uglify()) 


.pipe (gulp.dest('./build/')); 


gulp 借 鉴 了 UNIX 操 作 系 统 的 管道 (pipe〉 思 想 ， 前 一 级 的 输出 ， 直 接 变 成 后 一 级 的 输 
入 ， 使 得 它 在 操作 上 非常 简单 。 

2. 高 效 

使 用 Grunt 的 WO 过 程 中 会 产生 一 些 中 间 态 的 临时 文件 ， 一 些 任务 生成 临时 文件 ， 其 他 
任务 可 能 会 基于 临时 文件 再 做 处 理 并 生成 最 终 的 构建 后 文件 。 频 繁 在 磁盘 中 读 写 临 时 文 
件 ， 使 得 构建 性 能 较 低 ， 如 图 5-6 所 示 。 


文件 系统 临时 文件 输出 


读 文件 /| 修改 | 写 文件 // 读 文件 /中 修改 | 写 文件 // 读 文 件 /修改 | 写 文件 
图 5-6 Grunt 的 工作 流程 
而 gulp 基 于 流 的 方式 进行 文件 处 理 ， 通 过 管道 将 多 个 任务 和 操作 连接 起 来 ， 不 需要 写 
中 间 文 件 ， 如 图 5-7 所 示 。 
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文件 系统 输出 


读 文件 A 修改 轿 修改 上 修改 > sxft / 
图 5-7 gulp 的 工作 流程 
































3. 高 质量 

gulp 的 每 个 插件 只 完成 一 个 功能 ， 确 保 了 插件 的 简单 ， 各 个 功能 通过 流 方式 进行 整合 
并 完成 复杂 的 任务 。 

4. 易学 

gulp 的 API 只 有 4 个 ， 掌 握 了 这 4 个 API 之 后 ， 便 可 以 通过 管道 流 组 合 出 自己 想 要 完成 
的 任务 。 


“gulp” 还 是 “Gulp”? 
gulp 一 直 都 是 小 写 的 ， 只 在 gulp 的 商标 中 用 大 写 ?。 





5.5.2 gulp 的 API 


gulp 只 有 4 个 API， 即 gulp.task、gulp.src、gulp.dest 和 gulp.watch。 在 gulp 项 目的 配置 文 
件 gulpfile.js 里 将 使 用 这 些 API。 
1. gulp.task(name[, deps], fn) 
task 方 法 用 于 定义 具体 的 任务 ， 其 参数 如 表 5-3 所 示 。 
表 5-3 gulp.task 的 参数 





参 数 描 述 
任务 名 称 
可 选 参数 。deps 是 一 个 包含 任务 列表 的 数组 ， 是 当前 任务 的 依赖 任务 。task 方 





法 会 并 发 执行 这 些 依赖 任务 ， 等 这 些 依赖 任务 完成 后 再 执行 当前 任务 
| 和 m 。 ”| 任务 函数 ， 完 成 当前 任务 的 操作 


例如 : 





gulp.task('js', ['jscs', 'jshint'], function() { 
return gulp 


src('./src/**#/*.js') 


© gulpjs. gulp/docs/FAQ.md[2016]. [2016]. https://github.com/gulpjs/gulp/blob/master/docs/FAQ.md. 
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以 上 示例 定义 了 任务 js， 它 依赖 两 个 任务 : jscs 和 jshint。 只 有 当 jscs 和 jshint 任 务 完 成 
后 ， js 任务 才能 够 执行 。 另 外 ，jscs 和 jshint 是 并 发 执行 ， 无 法 假设 哪个 先 开始 或 结束 。 

如 果 一 个 任务 的 名 字 为 default， 就 表明 它 是 “默认 任务 ”， 在 命令 行 直接 输入 gulp 命 
令 ， 就 可 运行 该 默认 任务 。 

gulp 支 持 异 步 任 务 。 只 要 任务 函数 血 满足 以 下 条 件 之 一 ， 那 么 这 个 任务 就 可 以 异步 
执行 : 

(1) 接受 一 个 回调 函数 参数 。 示 例 代码 如 下 : 





(2) 返回 一 个 stream 对 象 。 示 例 代 码 如 下 : 





(3) 返回 一 个 promise 对 象 。 示 例 代码 如 下 : 
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var Q = require('q'); 
gulp.task('somename', function() { 
var deferred = Q.defer(); 
// do async stuff 
setTimeout (function() { 
deferred.resolve(); 
¥ 


return deferred.promise; 


2. gulp.src(globs[, options]) 
src 方 法 用 于 产生 数据 流 。 它 输出 符合 匹配 模式 的 文件 ， 将 文件 转换 成 (返回 ) 一 个 
Vinyl files? 的 stream 对 象 ， 并 且 利用 管道 和 其 他 任务 连接 起 来 ， 如 表 5-4 所 示 。 
表 5-4 gulp.src 的 参数 


参数 描 述 
i glob 匹 配 模式 字符 串 或 者 匹配 模式 数组 ， 用 于 指定 所 要 处 理 的 文件 ， 其 语法 是 node-glob8 语 
放 法 (除了 negation 模 式 ) 
a 可 选 参数 。options 是 一 个 配置 对 象 。 它 支持 node-glob 和 glob-stream“ 的 所 有 选项 (除了 





ignore) ， 并 新 增 3 个 字段 ， 如 表 5-5 所 示 


常见 的 glob 匹 配 模式 有 : 
@ src/app.js: 指定 确切 的 文件 名 src/app.js。 
@ src/*.js: SIC 目 录 内 后 级 名 为 js 的 文件 。 
@ src/**/*js; Src 目录 及 其 所 有 子 目 录 中 后 级 名 为 js 的 文件 。 
@ 1js/app.js: 除了 js/app.js 以 外 的 所 有 文件 。 
表 5-5 gulp.src options 对 象 的 字段 





























选 项 | 类 型 | 默认 值 描 述 
如 果 该 项 被 设置 为 false， 那 么 将 会 以 stream 方 式 返回 在 
options.buffer | 布尔 值 |true 加 采访 于 饼 和 闪 以 文件 buffer 的 形式 。 盆 守 是 理 起 天 文件 人 
一 一 一 





options.base 











字符 串 glob 的 基准 路 径 ee i 的 基准 语 各 是 
(glob2base®) 。 | clientyjs， ee 





gulp.js. Vinyl adapter for the file system[OL]. [2016]. https://github.com/gulpjs/vinyl-fs. 

Isaac Z. Schlueter glob functionality for node.js[OL]. [2016]. https://github.com/isaacs/node-glob. 

gulp.js. File system globs as a stream[OL]. [2016]. https://github.com/gulpjs/glob-stream. 

Eric Schoffstall Extracts a base path from a node-glob instance[OL]. [2016]. https://github.com/contra/glob2base. 


©OQ@OO 
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下 面 举例 说 明 options.base 的 用 法 。 
假如 在 client/js/somedir 目 录 中 ， 有 一 个 文件 somefile.js，options.base 选 项 
的 用 法 举例 如 下 : 


// 匹配 'client/js/somedir/somefile.js' 
/1/ 并 且 将 "base' 解析 为 'client/js/' 


gulp.src('client/js/**/*.js') 


.pipe (minify()) 
// SA 'build/somedir/somefile.js"' 


.pipe (gulp.dest ('build')); 


gulp.src('client/js/**/*.js', { base: 'client' }) 
.pipe (minify()) 
// SA 'build/js/somedir/somefile.js' 


.pipe (gulp.dest ('build')); 











3. gulp.dest(path[, options]) 
dest 方 法 把 管道 的 输出 写 入 文件 ， 同 时 继续 输出 ， 这 样 开发 人 员 可 以 通过 多 次 调用 
dest 方 法 ， 将 输出 写 入 到 多 个 目录 。 如 果 目 标 目录 不 存在 ，dest 方 法 会 新 建 目 录 。dest 方 法 
的 参数 如 表 5-6 所 示 。 
表 5-6 gulp.dest 的 参数 


六 





[path 。 | 文件 输出 目录 。 可 以 是 字符 串 ， 也 可 以 是 一 个 返回 路 径 的 函数 
可 选 参数 。options 是 一 个 配置 对 象 ， 它 有 两 个 选项 : 

options ”|options.cwd: 用 于 指定 写 入 路 径 的 基准 目录 ， 默 认 是 当前 目录 
options.mode: 用 于 指定 写 入 文件 的 权限 ， 默 认 是 0777 





4.gulp.watch(glob[, opts], tasks) 或 gulp.watch(glob[, opts, cb]) 
watch 方 法 用 于 指定 需要 监视 的 文件 。 一 旦 这 些 文件 发 生变 动 ， 就 会 运行 指定 任务 或 
回调 函数 。 其 参数 如 表 5-7 所 示 。 
表 5-7 gulp.watch 的 参数 
参数 | 描 述 
alob 。 |alob 匹 配 模式 字符 申 或 者 匹配 模式 数组 〔 同 gulp.sre》， 指 定 需要 监视 的 文件 


opts 可 选 参数 。opts 是 一 个 配置 对 象 ， 是 传 给 gaze@ 的 参数 。gulp.watch 使 用 gaze 监 视 文 件 的 变动 


© Kyle Robinson Young. A globbing fs.watch wrapper built from the best parts of other fine watch libs[OL]. 
[2016]. https://github.com/shama/gaze. 
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( 续 表 ) 
参数 描 述 
任务 名 称 数组 。 文 件 变动 后 gulp.watch 会 执行 这 个 数组 指定 的 一 个 或 多 个 任务 。 例 如 : 
ls var watcher = gulp.watch('js/**/#.js', 


[ruglify' 'reload']); 
上 面 的 示例 监视 js 目录 及 其 子 目 录 下 所 有 后 缀 为 js 的 文件 。 文 件 一 旦 有 变动 ， 就 会 执行 uglify 
和 reload 任 务 


加 








cb 











调 函数 。 每 次 文件 变动 后 gulp.watch 会 执行 这 个 回调 函数 。 这 个 回调 函数 cb(evenb 接 受 一 
个 event 对 象 参数 ，event 对 象 使 用 以 下 两 个 字段 描述 文件 的 变动 

。 event.type: 字符 串 类 型 ， 指 出 发 生变 动 的 类 型 ， 例 如 added、changed、deleted 或 renamed 
le 字符 串 类 型 ， 指 出 触发 该 事件 的 文件 路 径 


gulp.watch("js/x*+*/*+*.js'，function(event) { 


console.1og('File' + event.path + 'was' + event.type +', running tasks...') 
Ds; 








了 解 了 这 4 个 gulp API 以 后 ， 下 面 读者 可 尝试 编写 一 个 default 任 务 。 该 任务 调用 管道 函 
数 (.pipe) 将 各 个 操作 ， 包 括 读 取 子 目录 下 所 有 js 文件 ， 使 用 jshint 进 行 代码 分 析 ， 将 所 有 
js 文件 合并 成 alljs， 压 缩 后 写 入 build 目 录 等 操作 串 连 起 来 。 示 例 代 码 如 下 : 


gulp.task('default'，function () { 


return gulp 


5.5.3 


yi) 


.pipe (jshint ()) 
.pipe (concat ('all.js')) 
"Pipe (uglify()) 


-pipe (gulp.dest('./build/')); 


运行 gulp 任 务 





要 运行 gulp 任 务 ， 首 先 需 要 使 用 npm 命 令 安 装 gulp。 
1. 全 局 安装 gulp 命 令 行 接口 
全 局 安装 gulp 命 令 行 接口 的 命令 如 下 : 


C:\jasmine-demo>npm install -g gulp 


安装 完成 后 运行 以 下 命令 以 显示 gulp 的 当前 版 本 : 
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C:\jasmine-demo>gulp -v 


[00:02:47] CLI version 3.9.1 


2. 本 地 安装 gulp 
在 本 地 安装 gulp 的 命令 如 下 : 


C:\jasmine-demo>npm install gulp --save-dev 


3. 定义 gulp 任 务 


在 项 目 根 目录 创建 gulp 配 置 文件 gulpfile.js， 在 这 个 文件 里 使 用 gulp API 定 义 任务 。 示 
例 代 码 如 下 : 


Var gulp = require('gulp'); 
gulp.task('hello-world', function () { 
console.1log('Our first gulp task!'); 


]) 


Node.js 使 用 require 函 数 加 载 gulp 软 件 包 ， 获 得 gulp 对 象 ， 然 后 定义 任务 hello-world。 
4. 运行 gulp 任 务 


在 命令 控制 台 执行 gulp <task> <othertask> 命 令 ， 就 可 以 运行 指定 gulp 任 务 了 。 例 如 : 
C:\jasmine-demo>gulp hello-world 
[10:25:38] Using gulpfile C:\jasmine-demo\gulpfile.js 
[10:25:38] Starting "hello-wor1d'… 
Our first gulp task! 


[10:25:38] Finished 'hello-world' after 435 js 


5.6 Karma 和 gulp 集 成 


在 gulp 里 定义 Karma 任 务 不 需要 额外 的 插件 9?，gulpfiles js 示例 如 下 : 


© Karma. Example of using Karma with Gulp[OL]. [2016]. https://github.com/karma-runner/gulp-karma#do- 
we-need-a-plugin. 
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以 上 示例 在 创建 Server 对 象 时 传 入 一 个 配置 对 象 ， 该 配置 对 象 可 以 覆盖 karma.confjs 里 
的 配置 。 此 处 仅 设置 两 个 字段 : 
@ configFile: Karma 配 置 文件 路 径 。 dirname 是 Node.js 的 一 个 全 局 对 象 ， 代 表 当 前 
执行 代码 所 在 的 目录 名 。 
@ singleRun: 设 为 持续 集成 模式 。 
在 命令 控制 台 运 行 以 下 命令 执行 任务 testonce， 就 可 以 调用 Karma， 开 始 单元 测试 。 


| 


第 6 章 
AngularJS 应 用 的 单元 测试 
A 


AngularJS 是 一 款 来 自 Google 的 前 端 JavaScript 框 架 ， 也 是 一 个 著名 的 SPA (single-page- 
application， 单 页 应 用 ) 框架 。 它 有 如 下 一 些 特点 : 
@ 完整 的 解决 方案 。 很 多 前 端 开 发 功能 需求 被 AngularJS 原 生 支 持 ， 开 发 人 员 不 需要 
依赖 其 他 框架 提供 的 方案 。 
@ 容易 学 习 。AngularJS 使 用 HTML 作 为 模板 语言 ， 通 过 扩展 HTML 的 语法 ， 让 开发 
人 员 能 够 更 清晰 、 简 洁 地 开发 应 用 组 件 。 
@ 社区 活跃 ， 可 以 很 方便 地 找到 文档 和 各 种 解决 方案 。 
@ 开源 ， 同 时 得 到 Google 的 大 力 支 持 。 
@ 高 可 测试 性 。AngularJS 将 应 用 程序 的 测试 看 得 跟 应 用 程序 的 编写 一 样 重要 。 
以 上 这 些 特 性 使 得 AngularJS 迅 速成 为 了 JavaScript 的 主流 框架 。 本 章 假设 读者 有 一 定 
的 AngularJS 编 程 经 验 ， 在 此 基础 上 介绍 AngularJS 1.x 应 用 的 单元 测试 最 佳 实践 。 
本 章 将 介绍 : 
@ 测试 AngularJS 应 用 的 挑战 
®@ 初 识 ngMock 
@ AngularJS 单 元 测试 最 佳 实践 


6.1 测试 AngularJS 应 用 的 挑战 


测试 AngularJS 应 用 和 测试 一 般 JavaScript 应 用 相 比 ， 主 要 要 面 对 以 下 几 个 挑战 

1. 引导 AngularJS 应 用 

当 启动 浏览 器 加 载 AngularJS 应 用 时 ， 除 了 利用 <scripP> 标 签 引 用 AngularJS 的 库 文件 以 
外 ， 还 需要 通过 加 载 应 用 的 模块 ， 编 译 DOM 来 初始 化 AngularJS 应 用 。 
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初始 化 AngularJS 应 用 有 两 种 方案 。 一 种 方案 是 通过 ng-app 指 令 自动 引导 ， 加 载 应 用 模 
块 〈 以 下 示例 的 optionalModuleName 模 块 ) ， 代 码 如 下 : 


<!DOCTYPE html> 
<html ng-app="optionalModuleName"> 


<body> 


<script src="angular.js"></script> 
</body> 


</html> 


另 一 种 方案 是 使 用 angular.bootstrap 函 数 手动 引导 加载 以 下 示例 中 的 myApp 模 块 )， 
代码 如 下 : 


<!DOCTYPE html> 
<html> 


<body> 


<script src="angular.js"></script> 
<script> 
angular.element (function() { 
angular.bootstrap(document, ['myApp']); 
ED </script> 
</body> 


</html> 


但 是 ， 在 单元 测试 时 ， 开 发 人 员 怎 样 才能 在 不 能 使 用 ng-app 和 angular.bootstrap 的 情况 
下 引导 AngularJS 应 用 ? 

2. 使 用 Controller 

Controller 在 AngularJS 应 用 里 用 到 的 地 方 很 多 ， 它 的 主要 作用 是 向 视图 传递 数据 、 操 
作 页 面 逻 辑 和 增强 视图 。 开 发 人 员 可 以 通过 ng-controller 指 令 、Directive 或 者 Router 组 件 创 
建 Controller 的 实例 。 

在 单元 测试 时 ， 如 何 创 建 并 初始 化 一 个 Controller 实 例 并 对 它 进行 测试 ? 
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3. 使 用 Service 

在 AngularJS 应 用 里 ， 业 务 逻 辑 一 般 会 被 封装 在 Service 中 。Service (factory、service、 
constant、valuet 和 provider) 对 象 都 是 singleton 〈 单 例 ) 对 象 。AngularJS 负 责 创建 并 初始 化 
它们 ， 并 通过 依赖 注入 提供 给 Controller、Directive 或 者 其 他 Service。 

在 单元 测试 时 ， 如 何 使 用 测试 替身 代替 并 隔离 这 些 Service， 以 及 控制 它们 的 行为 ? 

4. 使 用 Directive 

AngularJS 推 荐 使 用 Directive 操 作 DOM。 一 个 Directive 包 含 HTML 模板 和 扩展 DOM 行 
为 的 JavaScript 代 码 。 那 么 如 何 测 试 AngularJS Directive? 

除了 以 上 几 点 ， 还 需要 考虑 如 何 测试 $scope、$http 和 S$log 等 AngularJS 内 建 对 象 。 本 书 
将 在 后 续 章 节 一 一 回答 。 


6.2 初 识 ngMock 


可 测试 性 一 开始 就 被 作为 AngularJS 立 项 的 核心 设计 目标 之 一 。 实 际 上 ，AngularJS 的 
创建 者 Misko Hevery 当 初 在 Google 的 工作 就 是 测试 顾问 。 
AngularJS 同 时 支持 单元 测试 和 端 到 端 测试 。 端 到 端 测试 可 以 基于 Protractor， 这 是 
AngularJS 团 队 创建 的 测试 库 〈 本 书 第 11 章 会 详细 介绍 Protractor) 。AngularJS 的 单元 测试 
是 通过 内 建 的 模块 ngMock 来 完成 的 。ngMock 包 含 了 一 系列 帮助 开发 人 员 测试 AngularJS 
应 用 程序 的 工具 和 方法 ， 它 有 两 个 主要 函数 ， 如 表 6-1 所 示 。 
表 6-1 ngMock 的 主要 函数 











函数 描 述 
[angular mock module 在 单元 测试 中 加 载 模块 | 
| angular.mock.inject 在 单元 测试 中 注入 依赖 组 件 | 





除了 这 两 个 函数 以 外 ，ngMock 另 外 提供 了 一 些 组 件 协助 完成 AngularJS 应 用 程序 的 测 
试 ， 下 面 依次 介绍 这 些 功能 。 


6.2.1 准备 测试 环境 


新 建 一 个 项 目 目录 C:mgmock-demo， 在 该 目录 下 执行 npm init 命 令 创建 package.json。 
该 文件 中 的 devDependencies 和 dependencies 字 段 内 容 如 下 : 


| 128 | Web 前 端 测试 与 集成 一 一 Jasmine/Selenium/Protractor/Jenkins 的 最 佳 实践 


"devDependencies": { 
"jasmine=score"”: *^2.5.2"; 
lb key We fie 
"karma-chrome-launcher": "^2.0.0"， 
"karma-jasmine": "^1.0.2" 

}, 

"dependencies": { 
gular 和 六 二 汪汪 
"angular-mocks": "1.5.9", 


bs 2 eh ek oe 





其 中 angular-mocks 就 是 ngMock 软 件 包 。 接 下 来 执行 npm install 命 令 安 装 以 上 所 有 这 些 
软件 包 : 


C:\ngmock-demo>npm install 


在 项 目 目录 下 执行 karma init 命 令 创建 karma.conf.js〔 本 书 使 用 Karma 来 驱动 单元 测 
试 ) 。 配 置 文件 中 的 包 es 字 段 内 容 如 下 : 


files: [ 
'node modules/jquery/dist/jquery.js', 
'node_modules/angular/angular.js', 
"node_modules/angular-mocks/angular-mocks.js'， 


"app/**/*.js', 


将 测试 所 需 的 类 库 、 源 文件 和 测试 用 例 都 添加 到 files 字 段 。 其 中 angular-mocks.js 是 
ngMock 的 类 库 。 


6.2.2 理解 模块 (Module ) 











大 多 数 应 用 程序 都 有 个 main 函数 来 初始 化 、 连 接 以 及 启动 整个 应 用 ， 但 是 AngularJS 
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使 用 模块 化 的 组 织 方式 ， 没 有 main 函 数 。 开 发 人 员 可 以 把 AngularJS 的 模块 想象 成 一 个 容 
器 ， 包 括 Controller、Service、Filter、Directive 等 组 件 ， 如 图 6-1 所 示 。 



























































Module 
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图 6-1 AngularJS 模 块 
在 AngularJS 应 用 程序 里 ， 开 发 人 员 使 用 以 下 方式 创建 和 获取 模块 。 
@ 创建 一 个 模块 
创建 模块 的 代码 如 下 : 


// Setter 


angular.module('demoApp', ['helperModule']); 


@ 获取 一 个 模块 
获取 模块 的 代码 如 下 : 


// Getter 


angular.module ('demoApp'); 


AngularJS 应 用 通过 ng-app 命 令 或 angular.bootstrap 函 数 声 明 用 哪个 模块 来 引导 程序 。 和 
main 函 数 相 比 ， 模 块 化 方式 非常 有 利于 单元 测试 的 代码 书写 。 因 为 使 用 模块 化 方式 ， 在 单 
元 测试 中 只 需要 加 载 需要 测试 的 特定 模块 ， 而 不 是 所 有 的 模块 。 

ngMock 的 angularmockmodule 函 数 用 于 在 单元 测试 中 加 载 模块 。 它 接受 3 种 参数 ， 

@ 字符 串 : 已 有 模块 的 名 字 。 

@ 回调 函数 : 创建 一 个 新 的 匿名 模块 。 

@ 对 象 : 创建 一 个 新 的 匿名 模块 。 

接 下 来 分 别 介绍 这 3 种 参数 。 

1. 字符 串 参 数 

假设 AngularJS 应 用 定义 了 两 个 模块 ， 并 在 这 两 个 模块 里 定义 了 一 系列 Controller、 
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Service 等 组 件 ， 如 下 所 示 : 


angular.module ('demoApp.module', []); 


angular.module('helperModule', []); 


如 果 要 在 单元 测试 里 测试 这 些 组 件 ， 必 须 先 加 载 相应 的 模块 。angular.mock.module 字 
符 串 参数 指定 了 需要 加 载 的 模块 。 以 下 的 测试 用 例 用 于 加 载 demoApp.module: 


describe('angular.mock.module', function () { 
it('should load module with string alias', function () { 
angular.mock.module('demoApp.module'); 


expect (true) .toBe (true); 


可 以 同时 加 载 demoApp.module 和 helperModule， 代 码 如 下 ; 


angular.mock.module('demoApp.module', 'helperModule')7 


也 可 以 分 别 加 载 ， 代 码 如 下 : 


angular.mock.module('demoApp.module'); 


angular.mock.module('helperModule'); 


2. 回调 函数 

为 了 达到 单元 测试 的 隔离 目的 ， 有 时 候 需 要 创建 一 些 临时 组 件 来 代替 实际 的 组 件 。 创 
建 这 些 临 时 组 件 需 要 一 个 容器 (模块 ) 。 当 angularmockmodule 使 用 回调 函数 时 ， 它 会 定 
义 一 个 匿名 模块 ， 回 调 函数 里 声明 的 组 件 都 被 注册 在 匿名 模块 里 。 例 如 以 下 示例 代码 在 匿 
名 模块 里 创建 了 一 个 constant 组 件 : 


it('should load module with anonymous function', function () { 
angular.mock.module (function($provide) { 
$provide.constant ('apiUrl', 'http://wuw.example.com/api'); 
// We could register other provider services here…e.g. 


// S$provide.value('apiKey', 'apisecret'); 
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Ds; 
expect (true) .toBe (true); 


]) 


3. 对 象 参数 
当 使 用 对 象 参数 时 ，angularmockmodule 也 会 定义 一 个 匿名 模块 ， 这 个 对 象 参数 里 的 


每 一 对 字段 / 值 将 成 为 一 个 Value 组 件 。 例 如 以 下 示例 在 匿名 模块 里 创建 了 两 个 Value 组 件 : 
apiKey 和 basicService: 





it('should load module with object', function () { 
angular.mock.module({ 
"apiKey': "apisecret'v 
"basicService': { 
changeMessage: function (msg) { 


return msg + '!!!'; 


Ds; 
expect (true) .toBe (true); 


]) 7 


对 象 参数 和 回调 函数 都 会 定义 一 个 匿名 模块 并 在 匿名 模块 中 创建 测试 用 的 临时 组 件 ， 
它们 的 区 别 是 : 对 象 参数 只 能 创建 Value 组 件 ， 而 回调 函数 可 以 创建 其 他 类 型 的 组 件 。 


AngularJS 内 建 的 ng 和 ngMock 模 块 会 被 自动 加 载 ， 而 不 需要 在 单元 测试 里 


特地 调用 angularmock.module 来 加 载 这 两 个 模块 。 





6.2.3 理解 注入 机 制 (Inject ) 


为 了 测试 某 些 组 件 ， 首 先 利 用 angularmockmodule 加 载 模块 ， 获 得 模块 中 各 个 组 件 的 
实例 〈 参 见 图 6-2) 后 才能 对 这 些 实例 进行 单元 测试 。 那 么 如 何在 单元 测试 中 得 到 组 件 的 
实例 呢 ? 
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图 6-2 ”模块 和 组 件 


在 AngularJS 应 用 中 ， 如 果 需 要 一 个 被 依赖 的 组 件 实例 ， 则 不 会 调用 new 操 作 符 ， 而 是 
利用 AngularJS 内 建 的 依赖 注入 机 制 ， 由 AngularJS 创 建 并 注入 到 应 用 中 。 依 赖 注入 机 制 使 
得 各 个 组 件 之 间 耦 合 度 低 ， 可 测试 性 好 ， 因 此 开发 人 员 在 单元 测试 中 可 以 方便 地 对 依赖 组 
件 进 行 替换 。 

AngularJS 的 依赖 注入 机 制 是 通过 $injector 完 成 的 。 每 一 个 AngularJS 应 用 都 有 一 个 
$injector 管 理 依 赖 查询 以 及 实例 化 组 件 。 事 实 上 ， 使 用 ng-app 指 令 引 导 AngularJS 应 用 时 ， 
ng-app 除 了 加 载 相应 模块 以 外 ， 同 时 还 创建 一 个 Sinjector， 该 Sinjector 负 责 创 建 并 管理 
AngularJS 组 件 的 所 有 实例 ， 包 括 Directive 和 Controller 等 ， 如 图 6-3 所 示 。 
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图 6-3 AngularJS Sinjector 
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Module 不 是 Namespace。 

虽然 AngularJS 的 模块 是 容器 ， 包 含 Controller、Directive 等 组 件 ， 但 是 它 
没有 提供 任何 命名 空间 的 功能 。 在 一 个 应 用 里 ， 所 有 模块 里 的 组 件 都 会 被 一 

© 个 $injector 管 理 。 如 果 不 同 模块 里 有 同名 的 组 件 ， 那 么 这 些 同名 组 件 ( 参 见 图 
6-3) 就 会 有 命名 冲突 ， 后 加 载 的 组 件 会 代替 前 面 的 组 件 。 事 实 上 在 AngularJS 

单元 测试 中 ， 开 发 人 员 可 以 利用 这 个 特性 定义 一 些 同 名 的 “ 假 ” 组 件 〈 测 试 

替身 ) 来 代替 实际 组 件 ， 起 到 隔离 的 效果 。 











在 单元 测试 时 开发 人 员 也 需要 一 个 Sinjector 来 管理 并 实例 化 依赖 组 件 。ngMock 的 
angularmock.inject 函 数 为 每 个 测试 用 例 创建 并 封装 一 个 Sinjector， 注 入 测试 所 需要 的 组 件 
实例 。 

为 了 理解 angularmock.inject 函 数 ， 需 要 准备 一 个 被 测试 的 Service (C:\ngmock-demo\ 
app\basic\product.service.js) 。 


product.service.js 文 件 的 内 容 如 下 : 


/* product.service.js */ 
(function() { 
"use strict'; 
angular.module('demoApp.basic', []); 
angular 
.module ('demoApp.basic') 
.service('ProductService', ProductService); 
function ProductService() { 
return function () { 


return [{name: 'foo0'}, {name: ‘'bar'}]; 


} 


DO 


以 上 示例 中 ， 模 块 demoApp.basic 里 定义 一 个 简单 的 Service (ProductService) ， 这 个 
Service 其 实 是 一 个 函数 ， 调 用 它 会 返回 一 个 对 象 数组 。 
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里 将 所 有 功能 代码 放 到 一 个 文件 里 。 本 章 AngularJS 代 码 基本 遵循 John Papa 的 


@ 注意 : 通常 定义 模块 的 代码 会 放 到 单独 的 app.js 里 ， 考 虑 篇 幅 所 限 ， 这 
AngularJS 样 式 指南 了 。 





接 下 来 编写 单元 测试 代码 C:ngmock-demo\app\basic\product.service.spec.js， 内 容 如 下 : 


/* product.service.spec.js */ 
describe('ProductService ', function () { 
var ProductService; 
beforeEach (function () { 
angular.mock.module('demoApp.basic'); 
// Get the service from the injector 
angular.mock.inject (function (_ProductService ) { 
ProductService = ProductService ; 
Ds; 
Ds; 


it('should retrieve products successfully', function () 


var result = ProductService(); 
expect (result) .toEqual([{name: 'foo'}, {name: 'bar’}]); 
Ds: 


]) 7 


此 示例 依次 完成 以 下 工作 : 

(1) 定义 一 个 变量 ProductService， 准 备 保存 ProductService 实 例 。 

(2) 使 用 angularmockmodule 函 数 加 载 demoApp.basic。 

(3) 调用 angularmock.inject 函 数 ， 传 入 一 个 回调 函数 ， 参 数 为 ProductService 。 
angularmock.inject 创 建 Sinjector， 并 且 在 已 经 加 载 的 模块 里 寻找 名 为 ProductService 的 组 
件 。 (注意 参数 ProductService 是 AngularJS 社 区 的 一 种 使 用 惯例 ， 通 过 前 后 下 画 线 包 装 
需要 注入 的 组 件 ，$injector 在 解析 时 会 自动 去 除 两 端的 下 画 线 。 实 际 上 在 注入 组 件 名 前 后 添 
加 下 画 线 也 便于 编写 测试 ， 使 得 测试 用 例 里 内 局 部 变量 ProductService 和 注入 组 件 名 一 致 ) 

(4) $injector 在 demoApp.basic 模 块 里 找到 ProductService 组 件 ， 将 它 的 实例 通过 _ 


© JohnPapa. Angular 1 Style Guide[OL]. [2016]. https://github.conyjohnpapa/angular-styleguide/tree/master/al. 
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ProductService 参数 传 入 函数 ， 然 后 赋 给 变量 ProductService。 

完成 以 上 工作 后 ， 即 可 在 测试 用 例 里 使 用 ProductService 实 例 。 

在 项 目 根 目录 下 执行 kamma start 命 令 ， 测 试 通 过 。 然 后 对 原先 的 JavaScript 代 码 稍 作 修改 ， 
增加 一 个 新 的 HelperService， 并 且 让 ProductService 依 赖 于 HelperService 组 件 ， 代 码 如 下 : 


angular 
.module ('demoApp.basic') 
.service('ProductService', ProductService) 
.Service('HelperService', HelperService); 
ProductService.$inject = ['HelperService']; 
function ProductService (HelperService) { 
return function() { 


return HelperService(); 


} 
function HelperService() { 
return function () { 


return [{name: 'foo'}, {name: ‘'bar’'}]; 


在 不 修改 测试 用 例 的 情况 下 此 单元 测试 仍然 可 以 通过 ， 因 为 angularmock.inject 函 数 不 
仅 能 解析 ProductService， 而 且 能 自动 解析 ProductService 所 依赖 的 组 件 HelperService。 

上 面 的 测试 用 例 有 个 缺陷 ， 就 是 同时 测试 了 ProductService 和 HelperService。 单 元 测试 
应 该 是 无 依赖 和 隔离 的 。 测 试 ProductService 时 开发 人 员 需 要 将 它 所 依赖 的 HelperService 隔 
离 ， 用 “ 假 ” 的 HelperService 代 替 实 际 的 HelperService。 为 此 修改 product.service.spec.js， 
代码 如 下 : 


/* product.service.spec.js */ 
describe('Productservice ', function () { 
Var ProductService; 


beforeEach (function () { 
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angular.mock.module ('demoApp.basic'); 
angular.mock.module ({ 
"HelperService': function() { 
return [{name: 'baz'}, {name: 'qux'}]; 
时 
nD; 
// Get the service from the injector 
angular.mock.inject (function (_ProductService ) { 
ProductService = ProductService ; 
Ds; 
Ds; 
it('should retrieve products successfully', function () { 
var result = ProductService(); 
expect (result) .toEgqual([{name: 'baz'}, {name: 'qux'}]); 
Ds; 


]) 7 


以 上 示例 调用 angularmockmodule 定 义 一 个 匿名 模块 ， 并 且 利 用 对 象 参数 创建 一 个 临 

时 Value 组 件 HelperService， 准 备 取代 应 用 程序 里 的 HelperService。 同 时 修改 断言 的 期 望 值 
([{name: "baz},， fname: 'qux'}]) 以 满足 “ 假 ” 的 HelperService。 测 试 结果 显示 使 用 了 匿名 
模块 里 的 HelperService， 而 不 是 demoApp.basic 里 的 HelperService。 

以 上 单元 测试 最 终 使 用 匿名 模块 的 HelperService 取 代 应 用 程序 里 的 HelperService， 其 
原因 是 : 虽然 有 多 个 模块 ， 但 是 测试 程序 只 有 一 个 Sinjector， 各 个 模块 里 的 所 有 组 件 最 
终 都 由 这 个 $injector 管 理 ， 所 以 晚 加 载 的 匿名 模块 里 的 同名 HelperService 会 覆盖 demoApp. 
basic 里 的 HelperService， 如 图 6-4 所 示 。 
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图 6-4 ”单元 测试 中 的 $injector 
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需要 注意 的 是 ， 在 测试 代码 里 模块 加 载 的 顺序 非常 重要 。 如 果 像 以 下 代码 里 先 定义 匿 
名 模块 ， 然 后 加 载 demoApp.basic， 那 么 测试 用 例 最 终 使 用 的 仍 是 实际 的 HelperService， 在 
单元 测试 中 需要 避免 这 种 情况 : 
angular.mock.module ({ 
'Helperservice': function() { 
return [{name: 'baz'}, {name: ‘gux'}]; 
} 
Ds; 


angular.mock.module('demoApp.basic'); 


AngularJS 内 建 的 ng 和 ngMock 模 块 会 被 $injector 自 动 加 载 ， 并 且 会 加 载 在 
它 的 模块 列表 的 最 前 面 。 查 看 angular-mocks.js 中 angularmock.inject 函 数 的 实 
现 ， 代 码 如 下 : 


window.inject = angular.mock.inject = function() { 


® WANNANAANANAAAA 


function WorkFn() { 


Var modules = currentSpec.$modules || []; 


modules.unshift('ngMock'); 


modules.unshift('ng'); 











beforeEach 里 的 angularmock.inject 函 数 会 为 每 个 测试 用 例 创建 一 个 Sinjector。 如 果 多 个 
测试 用 例 要 共享 一 个 $injector， 那 么 可 以 在 beforeAll 里 创建 它 ， 但 是 必须 额外 调用 angular. 
mock.module.sharedInjector 函 数 ， 如 下 所 示 : 


describe('Shared Injector', function () { 
Var ProductService; 
angular.mock.module.sharedInjector ();} 


beforeAll (angular.mock.inject (function ( ProductService ) { 
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ProductService = ProductService ; 





angularmockmodule 和 angularmock.inject 函 数 都 被 发 布 到 全 局 的 window 
®® 对 象 处 ， 所 以 可 以 直接 使 用 module() 和 inject()。 本 书 为 了 避免 混淆 ， 还 是 使 用 


angularmockmodule 和 angularmock .inject 函 数 。 





6.3 AngularJS 单 元 测试 最 佳 实践 


6.3.1 测试 Controller 


AngularJS 的 Controller 组 件 负责 向 视图 传递 数据 、 控 制 页面 逻 辑 ， 是 AngularJS 里 广泛 
用 到 的 一 个 组 件 。 

1. 准备 Controller 示 例 

定义 一 个 Controller(C:\ngmock-demo\app\controller\products.controllerjs》， 代 码 如 下 : 


/* products.controller.js */ 
(function() { 
"use strict'; 
angular.module ('demoApp.controller', ['demoApp.basic']); 
angular.module('demoApp.controller') 
.controller('ProductsController', ProductsController) 
ProductsController.$inject = ['ProductService']; 
function ProductsController (ProductService) { 
var vm = this; 


vm.products = ProductSservice(); 


DOs: 
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ProductsController 被 定义 在 模块 demoApp.controller 里 ， 它 依赖 上 一 节 定 义 的 demoApp. 
basic 模 块 里 的 ProductService。 在 ProductsController 的 构造 函数 里 ， 从 ProductService 取 得 的 
数据 被 赋 给 vm.products。 

2. $controller 

要 测试 ProductsController， 必 须 在 单元 测试 中 获得 它 的 实例 。 但 是 angularmock.inject 
不 能 直接 实例 化 Controller， 为 此 ngMock 提 供 了 一 个 特殊 的 Scontroller 服 务 ， 可 以 通过 
angular.mock.inject 获 得 $controller 的 实例 ， 代 码 如 下 : 


Var $controller; 
beforeEach(function() { 
angular.mock.inject (function(_$controller ) { 


$controller = _$controller ; 


]) 


$controller 其 实 是 一 个 函数 ， 获 得 $controller 的 实例 后 就 可 以 调用 它 来 得 到 被 测 应 用 程 
序 的 Controller 实 例 。$controller 函 数 接受 3 个 参数 : 


$controller (constructor, locals, [bindings]); 


@ constructor: 字符 串 或 者 是 一 个 回调 函数 。 字 符 串 指 的 是 要 获取 的 Controller 的 名 
称 。 回 调 函 数 用 来 创建 一 个 匿名 Controller。 

@ locals: 对 象 。 其 字段 名 和 传 入 Controller 构 造 函 数 的 参数 名 匹配 ， 例 如 
ProductsController 构 造 函 数 的 ProductService 参 数 。 可 以 通过 该 对 象 传 入 “ 假 ” 的 
依赖 组 件 。 

@ bindings: 可 选 参数 ， 也 是 一 个 对 象 。 该 对 象 的 各 个 字段 〈 属 性 或 方法 ) 会 被 自动 
绑 定 到 Controller 实 例 上 。 当 被 测 应 用 程序 的 Controller 使 用 controllerAs 语 法 时 ， 测 
试用 例 代码 可 以 通过 bindings 参 数 对 Controller 进 行 初 始 化 。 

3. 通过 名 称 获得 Controller 实 例 

利用 Controller 名 称 获得 相应 的 实例 是 最 常见 的 一 种 情况 。 以 下 是 完整 的 测试 代码 


products.controller.spec.js: 


/* products.controller.spec.js */ 
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describe('ProductsController', function() { 
Var $controller; 
beforeEach (function() { 
angular.mock.module ('demoApp.controller'); 
angular.mock.inject (function(_$controller ) { 
$controller = _$controller ; 
Dn 
Ds; 
it('should return products list', function () { 
Var productsController; 
productsController = $controller('ProductsController',{}); 
expect (productsController.products) .toEquall( 
[{ name: "foo' }, { name: "bar' }]); 
]) 


]) 


以 上 示例 代码 中 ，demoApp.controller 模 块 被 加 载 后 (同时 也 加 载 了 依赖 模块 
demoApp.basic) ， 测 试用 例 调用 $controller 函 数 ， 传 入 'ProductsController' 字 符 串 ， 从 而 获 
得 ProductsController 的 实例 ， 然 后 就 可 以 对 ProductsController 进 行 测试 。 

4. 通过 回调 函数 创建 匿名 Controller 

$controller 函 数 的 constructor 参 数 也 可 以 是 一 个 回调 函数 ， 创 建 一 个 匿名 Controller， 通 
常用 来 帮助 开发 人 员 做 些 原 型 设计 ， 而 不 是 测试 应 用 程序 原 有 的 Controller。 以 下 示例 使 用 
了 回调 函数 : 


it('should return products list by anonymous controller', function () { 
var productsController; 
productsController = $controller (function (ProductService) { 
var vm = this; 
vm.products = ProductService(); 
he LON 


expect (productsController.products) .toEqual( 
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[{ name: 'foo' }, { name: 'bar’ }]); 


Ds; 


5. 使 用 locals 注 入 Controller 的 依赖 组 件 
ProductsController 依 赖 ProductService， 上 面 的 测试 代码 测试 ProductsController 的 同时 
也 使 用 了 应 用 程序 真实 的 ProductService。 如 果 想 要 在 单元 测试 时 隔离 Controller， 可 以 使 
用 $controller 函 数 的 locals 参 数 传 入 “ 假 ” 的 依赖 组 件 。 以 下 示例 “ 假 ” 的 ProductService 
(mockService) 通过 locals 对 象 传 入 $controller 函 数 中 : 


it('should return products list by mock service', function () { 

Var productsController; 
Var mockService = function () { 

return [{ name: 'baz' }, { name: 'qux' }]; 
}; 
productsController = $controller('ProductsController', 

{ ProductService: mockService }); 

expect (productsController.products) .toEqual( 

[{ name: 'baz' }, { name: 'qux' }]); 


]) 7 


6. 使 用 bindings 初 始 化 Controller 
$controller 函 数 的 bindings 对 象 参 数 的 各 个 字段 〈 属 性 或 方法 ) 会 被 自动 绑 定 到 
Controller 实 例 上 ， 通 常用 于 对 Controller 实 例 进行 初始 化 。 示 例 代码 如 下 : 


it('should initialize controller by bindings', function () { 
var productsController; 
var bindings = [{ name: 'baz' }, { name: "qux' }]; 
productsController = $controller('ProductsController', 
{}, {data: bindings}); 
expect (productsController.data) .toEqual( 


[{ name: "baz' }, { name: 'qux' }]); 
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以 上 示例 中 ,注意 传 入 $controller 的 对 和 象 {data: bindings}， 其 字段 data 会 被 自动 绑 定 到 
ProductsController 实 例 上 ; 最 后 验证 productsController 的 data 属 性 。 


6.3.2 ”单元 测试 中 的 Scope 


Controller 向 视图 传递 数据 有 两 种 方式 : controllerAs 和 $scope。 上 一 节 示 例 里 的 
ProductsController 使 用 了 controllerAs 语 法 ， 但 是 还 有 大 量 开发 人 员 习 惯 使 用 $scope (参见 
图 6-5) 。 那 么 在 单元 测试 中 如 何 处 理 $scope 呢 ? 


View Controller 


图 6-5 ”$scope 关 联 Controller 和 视图 
将 ProductsController 略 作 修改 ， 创 建 一 个 使 用 $scope 方 式 的 ProductsWithScopeController 


(C:ngmock-demo\app\scope\productswithscope.controller.js) 


























/* productswithscope.controller.js */ 
(function() { 
"use strict'; 
angular.module('demoApp.rootscope', ['demoApp.basic']); 
angular.module('demoApp.rootscope') 
.controller('ProductsWithScopeController',ProductsWithScopeController) 
ProductsWithScopeController.5$inject = ['$scope', 'ProductService']; 
function ProductsWithScopeController ($scope, ProductService) { 
$scope.products = ProductService(); 
} 


DOs: 


ProductsWithScopeController 依 赖 Sscope 和 ProductService。$scope 本 身 是 一 个 对 象 ， 如 
果 仅仅 作为 一 个 数据 模型 在 Controller 和 视图 间 传 递 数据 ， 那 么 在 单元 测试 时 可 以 使 用 一 个 
空 对 象 代替 实际 的 Sscope 对 象 。 示 例 代 码 如 下 : 


it('should return products list', function () { 


var $scope = {}; 
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Scontroller ('ProductsWithscopeController', {$scope: $scope}); 
expect ($scope.products) .toEqual( 
[{ name: 'foo' }, { name: 'bar’ }]); 


]) 


但 是 AngularJS 实 际 的 $scope 要 复杂 得 多 。 每 个 AngularJS 应 用 都 有 一 个 $rootScope， 
这 是 一 个 顶层 的 Scope 对 象 ， 开 发 人 员 可 以 通过 它 的 Snew 方 法 来 创建 新 的 $scope。 这 些 
$scope 对 象 都 被 包含 在 $rootScope 里 。$scope 之 间 可 以 嵌 套 ， 它 们 有 继承 或 独立 的 关系 ， 
如 图 6-6 所 示 。 除 了 可 以 作为 数据 模型 以 外 ，S$scope 还 有 自己 的 属性 和 方法 (例如 $apply 如 
$on) 。 


























SrootScope 
S$scope 
S$scope 
S$scope 
S$scope 
$scope 






































图 6-6 S$rootScope 和 $scope 


为 了 在 单元 测试 中 模拟 $scope，ngMock 提 供 了 对 应 的 测试 专用 $rootScope， 可 以 利用 
它 在 单元 测试 中 创建 $scope。 示 例 代 码 如 下 : 


/* productswithscope.controller.spec.js */ 
describe('ProductsWithScopeController', function() { 
Var $controller; 
Var $rootScope; 
beforeEgach (function () { 
angular.mock.module('demoApp.rootscope'); 
angular.mock.inject (function (_$controller , _$rootscope ) 
$controller = _$controller ; 
SrootScope = _SrootScope ; 


Ds; 
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Ds; 

it('should return products list', function () { 
Var $scope = $rootScope.$new(); 
$controller ('ProductsWithScopeController', {$scope: $scope}); 
expect ($scope.products) .togquall( 


[{ name: "foo' }, { name: 'bar’ }]); 


以 上 代码 所 创建 的 Scope 可 以 继承 以 下 内 容 : 


it('should return message from parent scope', function () { 
Var $scope = $rootScope.S$new(); 
Var $childScope = $scope.$new(); 
$scope.message = 'Parent Scope'; 
$controller('ProductsWithScopeController', {$scope: $childscope}); 
expect ($childscope.products) .toEqual( 
[{ name: "foo' }, { name: "bar' }]); 
expect ($childSscope.message) .toEqual('Parent Scope'); 


]) 7 


ngMock 测 试 专用 $rootScope 除 了 具有 AngularJS 内 建 的 SrootScope 的 功能 以 外 ， 还 额外 
提供 以 下 两 个 方法 以 协助 测试 ， 如 表 6-3 所 示 。 
表 6-3 ”ngMock 的 $rootScope 方 法 











| 方 法 描 述 | 
| $countChildScopes() 当前 Scope 包 含 的 所 有 直接 和 间接 Scope 的 数量 | 
$countWatchers() 当前 Scope 包 含 的 所 有 直接 和 间接 Scope 里 的 Watcher 数 量 





后 面 章节 测试 AngularJS 其 他 组 件 的 时 候 会 介绍 $rootScope 的 更 多 用 法 。 


6.3.3 测试 HTTP 交 互 


运行 在 浏览 器 里 的 JavaScript 代 码 使 用 Ajax 和 服务 器 进行 交互 已 经 是 现代 Web 应 用 中 
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不 可 或 缺 的 一 环 。$http 是 AngularJS 提 供 的 一 个 和 服务 器 进行 HTTP 交 互 的 核心 组 件 。 它 的 
底层 通过 $httpBackendProvider， 利 用 浏览 器 的 XMLHttpRequest 或 JSONP 与 服务 器 进行 连 
接 ， 如 图 6-7 所 示 。 下 面 介绍 使 用 $http 的 AngularJS 应 用 程序 进行 单元 测试 的 方法 。 





























上 一 | 
AngularJS Code l<— Sue Internet 
in Browser T J 1 | 
a | 
ShttpBackendProvider XHR/JSONP 











图 6-7 AngularJS 的 HTTP 交 互 


1. 准备 $http 示 例 
定义 一 个 Factory 〈C:mgmock-demovapp\http\basicHttp.factoryjs) ， 代 码 如 下 : 


angular.module('demoApp.http', []); 
angular 
.module ('demoApp.http') 
.factory('basicHttpFactory', basicHttpFactory) 
basicHttpFactory.$inject = ['$http']; 
function basicHttpFactory($http) { 
return { 
getProductName: getProductName 
}; 
function getProductName (Url) { 
return $http.get (url) 
.then (function (result) { 
return result.data.name; 


]) 


以 上 代码 里 basicHttpFactory 调 用 S$http 从 服务 器 获取 某 个 产品 的 名 字 。 
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AngularJS 中 使 用 Service (Factory 和 Value 等 ) 来 组 织 那 些 可 被 复 用 的 业 


务 逻 辑 。 建 议 尽量 将 Ajax 请 求 放 到 Service 中 去 实现 ， 而 不 要 在 Controller 或 
© Directive 中 直接 注入 $http。 这 样 在 单元 测试 中 可 以 让 “ 假 ” 的 Service 返 回 预 期 
结果 ， 提 高 应 用 程序 的 可 测试 性 。 
2. 使 用 $httpBackend 进 行 单元 测试 
$http 会 发 送 HTTP 请 求 到 服务 器 ， 但 单元 测试 中 需要 测试 代码 能 快速 运行 ， 及 时 反馈 
并 且 没 有 外 部 依赖 ， 所 以 不 希望 HTTP 请 求 被 真正 发 送 到 实际 服务 器 ， 而 只 是 验证 HTTP 请 
求 是 否 已 经 发 送 ， 并 且 能 得 到 预定 义 好 的 数据 。 
ngMock 提 供 了 测试 Shttp 用 的 伪 后 端 ShttpBackend， 如 图 6-8 所 示 。 














[= 河 Shttp 


Angular]S Code T J 
in Browser 








| ”> 预定 义 的 HTTP 返 回 结果 
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图 6-8 ”使 用 $httpBackend 
以 下 示例 代码 使 用 $httpBackend 对 basicHttpFactory 的 getProductName 方 法 进行 测试 : 














ShttpBackend 














describe('basicHttpFactory', function () { 
Var basicHttpFactory, $httpBackend; 
beforeEach (function () { 
angular.mock.module('demoApp.http'); 
angular.mock.inject (function( basicHttpFactory , _$httpBackend ) { 
basicHttpFactory = basicHttpFactory ; 
S$httpBackend = _$httpBackend ; 
Ds; 
Ds; 
it('getProductName should get mocked data successfully', function () { 
var result; 
var url = "http://localhost/foo/productinfo.json'; 
$httpBackend 
when('GET', url) 
-respond(200, { name: 'foo' }); 


var promise = basicHttpFactory.getProductName (url); 
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promise.then (function (data) { 
result = data; 

Ds; 

$httpBackend.flush (); 


expect (result) .toEqual ('foo'); 


以 上 示例 要 关注 以 下 4 点 : 
(1) 在 测试 用 例 里 通过 $httpBackend.when 设 置 伪 后 端的 响应 条 件 和 结果 。 一 旦 $http 
的 请 求 匹 配 响应 条 件 (GET http://localhost/foo/productinfo.json〉， 那 么 伪 后 端 就 会 返回 成 
功 状态 码 200 以 及 数据 。 
(2) 调用 basicHttpFactory.getProductName 方 法 发 送 HTTP 请 求 。 
(3) 因为 $http 是 异步 的 ，getProductrName 方 法 返回 一 个 Promise， 所 以 需要 设置 
Promise 的 回调 函数 。 此 时 伪 后 端 还 没有 响应 HTTP 请 求 。 
(4) 调用 $httpBackend flush 函 数 让 伪 后 端 立 即 响 应 等 待 的 HTTP 请 求 ， 然 后 验证 结果 。 
除了 $httpBackend.when， 开 发 人 员 还 可 以 使 用 $httpBackend.expect 设 置 请 求 的 响应 条 
件 和 结果 。 例 如 : 


S$httpBackend.expect ('GET', url) 
.respond(200, { name: 'foo' }); 


expect ($httpBackend.flush) .not.toThrow(); 


$httpBackend.expect 期 待 应 用 程序 发 出 GET http://localhost/foo/productinfo.json 请 求 。 如 
果 这 个 期 待 的 请 求 不 出 现 ，$httpBackend.flush 函 数 就 会 抛 出 异常 。 

3. When 和 expect 对 比 

虽然 ShttpBackend.when 和 $httpBackend.expect 都 可 以 用 来 设置 响应 条 件 和 结果 ， 但 是 
它们 有 很 大 区 别 ， 如 表 6-2 所 示 。 


表 6-2 ShttpBackend.when 和 ShttpBackend.expect 对 比 
ShttpBackend.when ShttpBackend.expect 








语法 .when(…).respond(…) 语法 .expect(…).respond(…) 


新 建 一 个 后 端 定义 backend definition) 。 当 应 用 程 | 新 建 一 个 请 求 期 望 (request expectation) 。 它 
序 请 求 符合 条 件 时 ， 伪 后 端 返回 预先 定义 的 数据 结 | 会 对 应 用 程序 的 请 求 进行 断言 ， 并 返回 指定 结 
果 ， 但 是 伪 后 端 不 会 对 请 求 进行 断言 ， 这 意味 着 不 管 | 果 。 如 果 预 期 的 请 求 没有 出 现 或 者 顺序 不 对 ， 那 
有 没有 请 求 符 合 条 件 ， 都 不 会 影响 最 终 测试 结果 么 测试 失败 〈$httpBackend ftush 抛 出 异常 ) 
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ShttpBackend.when ShttpBackend.expect 
严格 使 用 测试 

主要 用 于 返回 数据 主要 用 于 验证 应 用 程序 请 求 的 精确 用 法 
可 以 创建 多 个 后 端 定义 ， 与 请 求 顺序 无 关 创建 多 个 请 求 期 望 时 需要 注意 请 求 顺序 


后 端 定义 匹配 完 一 个 请 求 后 可 以 继续 匹配 下 一 个 请 求 | 削 丰 项 凡 请 求 册 现 后 ， 请 求 期 加 会 从 期 时 列表 中 










黑 盒 测试 





























大 多 数 情况 下 开发 人 员 使 用 when， 因 为 大 多 数 测试 只 是 测试 应 用 程序 如 何 处 理 $http 
返回 的 结果 ， 而 不 是 HTTP 请 求 本 身 。 

如 果 要 验证 HTTP 请 求 本 身 ， 可 以 使 用 expect， 它 可 以 : 

@ 期 望 应 用 程序 按 指 定 顺序 发 出 HTTP 请 求 。 

@ 期 望 应 用 程序 发 出 指定 数量 的 HTTP 请 求 。 

假设 需要 测试 应 用 程序 是 否 按照 指定 顺序 发 出 一 系列 的 HTTP 请 求 ， 其 中 必须 发 两 次 
http://localhost/2 请 求 ， 则 相关 测试 代码 如 下 : 


it('should demonstrate using expect in sequence', function () { 
S$httpBackend.expect('GET', 'http://localhost/1').respond(200); 
S$httpBackend.expect ('GET', 'http://localhost/2').respond(200); 
S$httpBackend.expect('GET', 'http://localhost/2').respond(200); 
S$httpBackend.expect ('GET', 'http://localhost/3').respond(200); 
/* Code under test #*/ 
S$http.get('http://localhost/1°'); 
S$http.get ('http://localhost/2°'); 
S$http.get('http://localhost/2°'); 
S$http.get('http://localhost/3°'); 
/* End */ 
expect ($httpBackend.flush) .not.toThrow(); 


]) 


在 以 上 测试 用 例 里 使 用 $httpBackend.expect 创 建 了 4 个 请 求 期 望 ， 对 应 于 4 个 HITP 请 
求 。 当 $httpBackend.flush 被 调用 时 ， 这 些 请 求 期 望 按 指定 顺序 对 HTTP 请 求 进行 验证 。 一 
且 某 个 请 求 期 望 被 满足 ， 那 么 这 个 请 求 期 望 会 从 期 望 列表 中 清除 。 只 要 有 一 个 请 求 期 望 没 
有 得 到 满足 或 者 有 一 个 HTTP 请 求 没有 被 验证 ， 那 么 测试 失败 。 例 如 以 下 的 应 用 程序 代码 
会 导致 测试 失败 ， 因 为 原本 期 望 一 次 http://localhost/3 请 求 ， 但 是 程序 发 出 了 两 次 请 求 : 
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/* Code under test */ 

S$http.get ('http://localhost/1'); 
S$http.get ('http://localhost/2'); 
S$http.get ('http://localhost/2'); 
$http.get ('http://localhost/3°'); 
S$http.get ('http://localhost/3°'); 


/* End */ 


4. when 和 expect 详 解 
when 和 expect 函 数 有 相同 的 参数 (以 下 代码 使 用 when 演 示 示 例 ) ， 其 中 data、headers 
和 keys 是 可 选 参数 ， 格 式 如 下 : 


when (method, url, [data], [headers], [keys]); 


expect (method, url, [data], [headers], [keys]); 


(1) method 参 数 

method 参 数 用 来 匹配 应 用 程序 使 用 的 HTTP 请 求 方法 (如 GET、POST、PUT、 
PATCH、DELETE、HEADER 和 JSONP) 。 

(2) ur 参数 

url 参 数 可 以 是 字符 串 、 正 则 表达 式 或 者 是 一 个 回调 函数 fanction(ur)， 用 来 匹配 HITP 
请 求 的 URL。 

其 中 ， 回 调 函 数 是 对 URL 进 行 的 自 定义 匹配 。 如 果 URL 符 合 匹 配 条 件 ， 那 么 回调 函数 
返回 true。 以 下 示例 代码 期 望 HTTP 请 求 的 URL 包 含 http://localhost/。 


ShttpBackend 
.when('GET', function (url) { 
return url.indexOf ("http://localhost/') !== -1; 
I 


.respond(200, { name: 'foo' }); 


(3) data 参 数 
可 选 参数 data 可 以 是 字符 串 、 正 则 表达 式 、 对 象 或 者 是 一 个 回调 函数 function(string)， 
用 来 匹配 应 用 程序 使 用 POST 或 PUT 提交 的 数据 。 
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以 下 示例 代码 期 望 应 用 程序 提交 的 是 一 个 标准 的 JavaScript 对 象 ; 


ShttpBackend 
-when('POST', 'http://localhost/api/products', { 
name: 'bob', 
description: 'bob description' 

1) 


.respond (201); 


如 果 使 用 字符 串 或 正则 表达 式 作 为 data 参 数 ， 这 相当 于 将 应 用 程序 提交 的 对 象 序列 化 
成 JSON 字 符 串 然后 再 进行 匹配 。 回 调 函数 则 是 对 提交 的 数据 进行 自 定义 匹配 ， 如 果 数 据 
符合 条 件 ， 那 么 回调 函数 返回 true。 示 例 代码 如 下 : 


$httpBackend 
.when('POST', 'http://localhost/api/products' 
,+ function (data) { 
return angular.fromJson (data) .name === 'bob'; 


}) .respond (201); 


(4) headers 参 数 
可 选 参数 headers 可 以 是 一 个 对 象 或 者 是 一 个 回调 函数 function(Object)， 用 来 匹配 应 用 
程序 发 出 请 求 的 HTTP 头 。 
以 下 示例 代码 期 望 应 用 程序 发 出 的 请 求 包含 一 个 自 定义 的 HTTP 头 字段 myHeader， 并 
且 它 的 值 是 products: 


ShttpBackend 
.When ('GET'， "http://localhost/foo/productinfo.json'，undefined，1{ 
myHeader: "products' 
Accept: "application/json, text/plain, */*" 
DD) 


.respond(200, { name: 'foo' }); 


AngularJ S 默 认 @ 自 动 为 所 有 请 求 添加 HITP 头 字段 Accept: application/json、text/plain 和 


© AngularJS. $http[OL]. [2016]. https://docs.angularis.org/api/ng/service/$http. 
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*#/*。 由 于 测试 时 对 象 需要 完全 匹配 请 求 包含 的 所 有 字段 ， 所 以 以 上 示例 里 headers 对 象 也 
要 包含 Accept 字 段 。 

回调 函数 则 是 对 HTTP 头 进行 自 定义 匹配 ， 如 果 HTTP 头 符合 条 件 ， 那 么 回调 函数 返回 
true。 示 例 代 码 如 下 : 


ShttpBackend 
.When('GET'， "http://localhost/foo/productinfo.json', 
undefined, 
function (headers) { 
return headers.myHeader === "products'; 
)) 


.respond(200, { name: "foo' }); 


(5) keys 参 数 
keys 是 一 个 可 选 数 组 参数 。 如 果 使 用 url 正 则 表达 式 来 匹配 URL，keys 用 来 存储 正则 表 
达 式 的 匹配 项 ， 供 输出 结果 时 (respond 函 数 ) 使 用 。 


When 和 expect 函 数 针对 各 个 HTTP 方法 都 提供 了 对 应 的 快捷 方法 ， 格 式 
如 下 : 


// when 

whenGET (url, [headers], [keys]); 

whenHEAD (url, [headers], [keys]); 
whenDELETE (url, [headers], [keys]); 
whenPOST (url, [data], [headers], [keys]); 
whenPUT (url, [data], [headers], [keys]); 
whenJSONP (url, [keys]); 

// expect 

expectGET(url, [headers], [keys]); 
expectHEAD(url, [headers], [keys]); 
expectDELETE (url, [headers], [keys]); 
expectPOST(url, [data], [headers], [keys]); 
expectPUT(url, [data], [headers], [keys]); 
expectPATCH (url, [data], [headers], [keys]); 


expectJSONP (url, [keys]); 
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5. 使 用 respond 方 法 

when 和 expect 函 数 都 会 返回 一 个 对 象 ， 该 对 象 具有 一 个 respond 方 法 。 当 应 用 程序 的 
HTTP 请 求 符合 预先 设置 的 响应 条 件 时 ， 可 以 用 respond 方 法 控制 返回 结果 。 

respond 方 法 有 以 下 两 种 格式 : 


respond([status,] data[, headers, statusText]); 


respond (function (method, url, data, headers, params); 


第 一 种 格式 直接 通过 参数 的 方式 设 定 返回 结果 。 各 参数 说 明 如 下 : 
@ status: HTTP 状 态 码 ， 例 如 200、201、404、500 等 。 

@ data: 指定 返回 数据 ， 例 如 JSON 数 据 。 

@ headers: HTTP 头 。 

@ statusText: 状态 描述 。 

以 下 示例 代码 直接 返回 一 个 对 象 : 


var url = 'http://localhost/foo/productinfo.json'; 
S$httpBackend 
.when('GET', url) 


.respond(200, { name: 'foo' }); 


第 二 种 格式 使 用 回调 函数 ， 回 调 函 数 可 以 根据 应 用 程序 的 请 求 内 容 动态 创建 返回 结 
果 ， 格式 如 下 : 


function(method, url, data, headers, params) 





传 入 回调 函数 的 参数 就 是 HTTP 请 求 的 内 容 ， 其 中 最 后 一 个 参数 params 是 一 个 对 象 有 
以 下 两 种 情况 : 

@ 默认 情况 下 请 求 URL 里 的 查询 字符 串 〈Query String) 会 被 解析 到 params 对 象 里 。 
例如 URL/list?foo=bar&baz=bla 里 的 查询 字符 串 会 被 解析 成 params 对 人 象 {foo: 'bar', 
baz: 'bla'} 。 

@ 如 果 Wwhen 或 expect 使 用 正则 表达 式 匹配 URL， 并 且 已 经 提供 了 keys 参 数 ， 那 么 匹配 
项 被 保存 在 keys 数 组 里 ，params 对 象 里 每 个 字段 就 对 应 着 keys 数 组 里 每 一 项 。 在 下 
面 的 示例 代码 中 : 
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ShttpBackend 

-when('GET', /localhost\/(.+)\/productinfo.json/, 
undefined, 
undefined, 
['name'] 
) 

.respond (function (method, url, data, headers, params) { 
return [200, {name: params.name}]; 


]) 7 


如 果 HTTP 请 求 的 URL 是 http://localhost/foo/productinfo.json， 经 过 以 上 示例 代码 中 的 正则 
表达 式 解 析 后 ， 其 匹配 项 是 foo， 保 存 到 name 里 。 所 以 respond 回 调 函 数 的 params 对 象 是 
{name: foo' } 。 

回调 函数 的 返回 值 是 一 个 数组 ， 包 含 status、data、headers 和 statusText。 

6. 使 用 flush 方 法 

在 产品 环境 中 ，AngularJS 程 序 对 服务 器 端的 HTTP 请 求 都 是 异步 的 ， 但 是 在 单元 测试 
中 ,不 太 容易 实现 异步 代码 的 测试 。$httpBackend 提 供 的 flush 方 法 允许 测试 立即 响应 等 待 
的 请 求 ， 这 样 就 可 以 让 异步 请 求 同 步 化 ， 从 而 能 够 在 单元 测试 中 同步 测试 HTTP 请 求 。 

单元 测试 里 的 HTTP 请 求 被 发 送 到 $httpBackend 里 等 待 处 理 ， 这 些 HTTP 请 求 按照 请 求 
顺序 被 响应 。 可 以 利用 flush 方 法 指定 响应 请 求 的 数量 ， 或 者 指示 flush 方 法 忽略 一 个 或 几 个 
请 求 。 其 格式 如 下 : 


S$httpBackend.flush([count], [skip]); 


@ Count: 可 选 参 数 ， 用 于 指定 flhush 函 数 响应 请 求 的 数量 。 如 果 不 提供 此 参数 ， 所 有 
等 待 中 的 请 求 〈 从 skip 开 始 ) 都 会 被 响应 。 

@ Skip: 可 选 参数 ， 默 认 值 为 0， 用 于 指定 ftush 函 数 忽略 的 请 求 。 例 如 skip 是 5S， 则 
fush 函 数 会 忽略 前 5 个 等 待 请 求 ， 从 第 6 个 开始 响应 。 

fhush 方 法 被 调用 时 ， 如 果 当 时 没有 等 待 的 HTTP 请 求 ， 它 会 抛 出 一 个 异常 。 

7. 辅助 方法 

$httpBackend 还 提供 了 其 他 几 种 辅助 方法 以 确保 应 用 程序 代码 能 正确 处 理 HTTP 请 求 。 
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@ verifyNoOutstandingExpectation(): 被 调用 时 ， 如 果 任 何 expect 设 置 的 条 件 都 没有 匹 
配 ， 它 就 会 抛 出 异常 。flush 内 部 也 会 调用 它 。 
@ verifyNoOutstandingRequest(): 被 调用 时 ， 如 果 还 有 等 待 的 请 求 没有 被 响应 ， 它 就 
会 抛 出 异常 。 
@ resetExpectations(): 重 置 所 有 expect 创 建 的 请 求 期 望 (request expectation) ， 但 是 
保留 when 创 建 的 后 端 定 义 (backend definition) 。 
通常 在 Jasmine 的 afterEach 里 调用 verifyNoOutstandingExpectation 和 verifyNoOnut- 
standingRequest 方 法 ， 确 保 每 个 测试 用 例 完成 后 所 有 expect 设 置 的 条 件 都 被 匹配 ， 并 且 所 
有 等 待 的 请 求 都 被 响应 。 示 例 代码 如 下 : 


// make sure no expectations were missed in your tests. 
afterEach(function () { 
S$httpBackend.verifyNoOutstandingExpectation(); 


S$httpBackend.verifyNoOutstandingRequest (); 


6.3.4 测试 Directive 


Directive〈 指 令 ) 是 AngularJS 最 重要 也 是 最 复杂 的 组 件 。AngularJS 内 建 了 丰富 的 
Directive《〈 例 如 ng-app 和 ng-controller 等 ) ， 也 允许 用 户 创 建 自 定义 的 Directive。 这 里 测试 
Directive 指 的 是 测试 自 定义 Directive。 

Directive 在 HTML 里 声明 ， 作 为 DOM 元 素 上 的 标记 ， 通 过 AngularJS 的 HTML 编 译 器 使 
DOM 元 素 拥 有 特定 的 行为 ， 和 用 户 进 行 交互 。 

一 个 Directive 既 有 HTML 模板 ， 又 有 和 用 户 进行 交互 的 JavaScript 代 码 ， 使 得 用 户 无 
法 像 调用 函数 一 样 使 用 Directive， 因 此 对 Directive 进 行 单元 测试 变 得 非常 棘手 。 接 下 来 
介绍 针对 Directive 的 各 个 部 分 分 别 进行 的 单元 测试 。 演 示 代 码 在 C:\ngmock-demo\app\ 
directivem 目 录 下 ) 





AngularJS 的 编程 模式 是 声明 式 编程 ， 大 部 分 的 DOM 操 作 可 以 通过 


AngularJS 提 供 的 Directive 来 完成 。 如 果 应 用 程序 需要 进行 DOM 操 作 ， 建 议 创 
建 自 定义 的 Directive 来 封装 DOM 操 作 。 





第 6 章 AngularJS 应 用 的 单元 测试 | 155 | 


1. 测 斌 DOM 操作 
首先 准备 一 个 简单 的 Directive， 这 个 Directive 的 link 函 数 会 添加 一 段 span 到 它 声 明 所 在 
的 HTML 元 素 中 ， 具 体 代码 如 下 : 





angular.module ('demoApp.directive') 
.directive('appendspanDirective', function() { 
return { 
link: function(scope, elem) { 


elem.append('<span>It is appended from directive.</span>'); 


AngularJS 推 荐 在 link 函 数 里 操作 DOM。 





和 测试 AngularJS 其 他 组 件 一 样 ， 为 了 测试 Directive， 需 要 先 获得 Directive 的 实例 。 但 
是 Directive 无 法 通过 注入 直接 获得 ， 需 要 做 一 些 特殊 准备 工作 ， 代 码 如 下 : 


var $compile, $scope, directiveElem; 
beforeEach(function () { 
angular.mock.module('demoApp.directive'); 
angular.mock.inject (function (_$compile , _$rootscope ) { 
Var element; 
$compile = _$compile ; 
$scope = _$rootScope_ .$new(); 
element = angular.element ('<div append-span-directive></div>'); 


directiveElem = $compile (element) ($scope); 


beforeEach 函 数 做 了 如 下 的 准备 工作 : 
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(1) 加 载 Directive 所 在 的 模块 demoApp.directive。 

(2) 注入 $compile 和 $rootScope 服 务 。 这 里 注入 $compile 服 务 的 原因 是 ， 在 生产 环境 
中 应 用 程序 被 ng-app 引 导 启 动 ，AngularJS 会 遍历 页 面 的 DOM 元 素 ， 识 别 所 有 的 Directive 并 
且 调 用 $compile 服 务 编 译 。 但 是 在 单元 测试 中 ， 必 须 手 动 调用 Scompile 对 被 测 Directive 进 
行 编译 。 

(3) 利用 $rootScope 创 建 一 个 新 的 Scope。 

(4) 因为 Directive 需 要 在 HTML 里 声明 ， 所 以 准备 了 测试 用 的 div 元 素 ， 并 声明 
append-span-directive。 

(5) 调用 $compile 服 务 编译 测试 用 的 DOM 元 素 和 Directive。 

准备 工作 完成 后 ， 测 试用 例 验证 appendSpanDirective 在 编译 后 是 否 生 成 span 元 素 以 及 

是 否 包含 指定 字符 串 。 代 码 如 下 : 


it('should have span element', function () { 
Var spanElement = directiveElem.find('span'); 
expect (3panElement) .toBeDefined() 


expect (3panElement .text()) .toEqual('It is appended from directive.'); 


2. 测试 Watcher ( 监视 器 ) 

传统 的 前 端 JavaScript 程 序 会 进行 大 量 的 DOM 操 作 ， 但 是 AngularJS 的 数据 绑 定 功能 使 
得 开发 人 员 从 繁琐 的 DOM 操 作 中 解脱 出 来 。 例 如 使 用 以 下 这 段 代 码 ， 即 可 在 页 面 上 实时 
输出 用 户 在 文本 输入 框 里 输入 的 内 容 : 


<input type="text" ng-model="aModel"/> 


<div>{ {aModel}}</div> 


如 果 采 用 传统 的 方式 完成 相同 功能 ， 则 可 能 需要 监听 文本 输入 框 的 各 种 事件 ， 例 如 用 
户 敲 击 的 按键 ， 并 在 每 次 事件 发 生 后 把 文本 框 里 的 内 容 写 入 div 元 素 中 。 

以 上 展示 的 AngularJS 数 据 绑 定 功能 的 关键 是 利用 了 当前 Scope 的 数据 模型 MBModel。 它 
通过 内 建 的 ng-model 指 令 与 输入 框 绑 定 ， 同 时 利用 AngularJS 表 达 式 {{faModel}} 与 div 元 素 
绑 定 。AngularJS 为 aModel 在 当前 Scope 创 建 一 个 Watcher (监视 器 ) ， 一 旦 aModel 数 据 有 变 
化 ，Watcher 会 根据 预先 设 定 更 新 视图 。 

除了 使 用 ng-model 和 AngularJS 表 达 式 ， 开 发 人 员 还 可 以 调用 $scope.$watch 手 动 注册 
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Watcher 要 监视 的 内 容 。 
以 下 示例 里 directive 使 用 Watcher 监 视 当前 Scope 里 message 内 容 的 变化 : 





测试 这 个 Directive 和 前 面 的 appendSpanDirective 很 类 似 ， 但 是 此 处 需要 验证 当 Scope 里 
message 变 化 时 ，Directive 里 的 内 容 也 要 随 之 改变 。 





注意 ， 以 上 测试 用 例 在 更 新 message 内 容 后 调用 $scope.$apply 函 数 ， 这 个 函数 和 
AngularJS 内 部 一 个 被 称 为 Sdigest 循 环 的 机 制 有 关 ， 如 图 6-9 所 示 。 
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aModel 








Hello Angular| 








S$scope.$watch('aModel', 
function(newValue,oldValue){ 
Swatch list|| _ old value new value ? //update the DOM with newValue 
aModel || Hello World |[Hello Angular| dirty:ture  }); 

















S$watch list]| _old value new value 
aModel |[Hello Angular|[Hello Angular| 






































aModel 
Hello Angular 

















图 6-9 ”Sdigest 循 环 

$digest 循 环 的 目的 是 检查 网 页 上 的 数据 模型 是 否 发 生 了 变化 并 更 新 数据 ， 在 数据 趋 
于 稳定 的 情况 下 ， 统 一 泻 染 页 面 ， 这 样 可 以 避免 为 了 响应 某 个 数据 变化 而 不 停 刷新 页 
面 ， 提 高 应 用 程序 的 性 能 。AngularJS 内 部 是 由 $scope.$digest 函 数 触发 8digest 循 环 。 很 
多 内 建 的 允许 改变 数据 模型 的 Directive〈 例 如 ng-model、ng-click) 在 用 户 更 新 数据 后 都 
会 自动 调用 $scope.$digest 函 数 触 发 循环 。 前 面 提 到 AngularJS 使 用 Watcher 监 视 数 据 模 型 
的 变化 ， 一 旦 $digest 循 环 开 始 ，AngularJS 就 会 依次 启动 各 个 Watcher。 每 个 Watcher 比 较 
它 所 监视 的 Scope 的 数据 模型 和 上 次 值 是 否 相同 。 如 果 不 同 的 话 ， 就 会 执行 Watcher 的 回 
调 函 数 进行 相应 操作 (例如 示例 代码 将 span 元 素 的 内 容 改 成 了 新 内 容 ) 。 当 所 有 Watcher 
遍历 完 后 ，AngularJS 会 重新 遍历 Watcher 列 表 ， 直 到 所 有 被 监视 的 数据 模型 没有 再 次 被 
改动 。 

在 上 面 的 单元 测试 中 更 新 了 $scope.message 的 内 容 ， 但 是 它 不 会 自动 触发 5digest 循 
环 ， 所 以 需要 手动 调用 $scope.$apply 函 数 进行 触发 ， 以 确保 在 断言 前 Directive 的 内 容 得 到 
更 新 。 





通常 不 直接 调用 $scope.$digest 函 数 ， 而 是 使 用 $scope.$apply。 
® $scope.$apply 内 部 会 调用 $rootScope.$digest， 这 样 $digest 循 环 会 从 $rootScope 
开始 ， 启 动 它 下 面 所 有 Scope 里 的 Watcher。 
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3. 测试 DOM 事 件 

Directive 通 过 增强 DOM 元 素 处 理 各 种 DOM 事 件 ， 使 用 户 交 互 变 得 简单 有 效 。 在 
AngularJS 中 这 些 用 户 交 互 代码 也 可 以 被 测试 。 例 如 以 下 代码 的 incrementValueDirective 里 
有 一 个 按钮 ， 一 旦 单 击 按钮 ， 则 value 的 值 加 1: 


angular.module ('demoApp.directive') 
.directive('incrementValueDirective', function () { 
return { 
template: '<button>Increment value!</button>', 
link: function (scope, elem) { 
elem.find('button') .on('click', function () { 


scope.valuet++; 


测试 这 个 Directive 需 要 模拟 单 击 设 定 的 按钮 ， 然 后 验证 value 的 值 ， 代 码 如 下 : 


it('should increment value on click of button', function () { 
$scope.value = 57 
Var button = directiveElem.find('button'); 
button.triggerHandler('click'); 
$scope. $apply(); 
expect ($scope.value) .toEqual (6); 


Ds; 


AngularJS 内 建 了 一 个 轻型 的 jQuery 库 ， 称 为 jQuery lite 或 者 jqLite?。 以 上 测试 用 例 调 
用 jqLite 的 triggerHandler 函 数 触发 按钮 单 击 事 件 ， 然 后 验证 value 的 值 。 

但 是 jqLite 只 提供 jQuery 的 部 分 功能 。 如 果 应 用 程序 引用 了 jQuery， 那 么 AngularJS 就 
会 使 用 jQuery 取代 jqLite。 我 们 在 Karam 的 配置 文件 里 可 以 添加 jQuery 库 文 件 ， 即 可 在 单元 


个 AngularJS. API angularelement[OL]. [2016]. https://docs.angularjs.org/api/ng/function/angular.element. 
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测试 时 使 用 更 多 jQuery 的 功能 。 


files: [ 
'node modules/jquery/dist/jquery.js', 
'node modules/angular/angular.js', 
'node modules/angular-mocks/angular-mocks.js', 


rapp/**/#.js', 


4. 测试 使 用 模板 的 Directive 

Directive 使 用 模板 有 两 种 方式 : 内 联 和 使 用 模板 文件 。 已 介绍 的 示例 incrementValue 
Directive 就 使 用 了 内 联 模板 。 因 为 内 联 模板 和 Directive 在 同一 个 文件 内 ， 所 以 测试 这 样 的 
Directive 不 需要 额外 的 步骤 。 

如 果 Directive 使 用 模板 文件 ， 那 么 AngularJS 需 要 发 出 一 个 异步 的 HTTP 请 求 获取 这 个 
模板 文件 。 例 如 : 


angular.module('demoApp.directive') 
.directive('productInfoDirective', function () { 
return { 


templateUr1: 'app/directive/product-info.html’' 


Ds; 


在 单元 测试 时 ， 模 板 必 须 加 载 完 才能 验证 测试 结果 ， 但 是 AngularJS 并 没有 提供 一 个 通知 
模板 加 载 完毕 的 事件 。 那 么 如 何 才 能 测试 使 用 模板 文件 的 Directive 呢 ? 

在 AngularJS 里 ， 当 一 个 模板 首次 使 用 时 ， 它 会 被 加 载 到 StemplateCache@ 模 板 缓存 
中 ， 这 样 将 来 应 用 程序 使 用 这 个 模板 时 可 以 从 缓存 直接 获取 。 应 用 程序 也 可 以 通过 script 
标签 或 者 调用 StemplateCache 服 务 的 方式 直接 把 文件 加 载 到 缓存 里 。 

为 了 测试 使 用 模板 文件 的 Directive， 需 要 在 测试 前 由 Karma 将 模板 文件 预先 加 载 到 
AngularJS 的 模板 缓存 ， 这 样 在 测试 时 ，Directive 会 直接 从 StemplateCache 里 获取 模板 文 


个 AngularJS. API $templateCache[OL]. [2016]. https://docs.angularis.org/api/ng/service/$templateCache. 
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件 ， 而 不 需要 连接 外 部 服务 器 。Karma 提 供 了 插件 Karma-ng-html2js-preprocessore 来 满足 这 
个 需求 。 
使 用 npm 命 令 安装 该 插件 ， 代 码 如 下 : 


C:\ngmock-demo>npm install karma-ng-html2js-preprocessor --save-dev 


修改 项 目 根 目 录 下 的 c:\ngmock-demo\karma.conf.js 文 件 。 首 先 向 其 中 增加 一 个 字段 
preprocessors， 告 诉 karma 测 试 前 使 用 预 处 理 器 ng-html2js: 


preprocessors: { 
"app/directive/*.html': ['ng-html2js'] 


}, 


然后 在 fles 字 段 添加 需要 加 载 的 html 文 件 : 


files: [ 
'node modules/jquery/dist/jquery.js', 
'node modules/angular/angular.js', 
'node modules/angular-mocks/angular-mocks.js', 
"app/**/*#.js', 
"app/directive/*.html' 


]， 


最 后 添加 字段 ngHtml2JsPreprocessor 对 插件 进行 设置 : 


ngHtml2JsPreprocessor: { 
moduleName: 'demoApp.template’ 


}, 


插件 karma-ng-html2js-preprocessor 的 作用 是 将 HTML 模 板 文件 转 成 JavaScript 代 
码 ， 生 成 一 个 AngularJS 的 模块 ， 模 块 名 可 以 通过 ngHtml2JsPreprocessor 字 段 指定 ， 本 
例 是 demoApp.template。 执 行 时 ， 加 载 这 个 模块 〈demoApp.template) ， 运 行 模块 内 的 


个 Karma. A Karma plugin. Compile AngularJS 1.x and 2.x templates to JavaScript on the fly[OL]. [2016]. 
https://github.com/karma-runner/karma-ng-html2js-preprocessor. 
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JavaScript 代 码 将 模板 文件 内 容 放 入 StemplateCache 中 ， 这 样 AngularJS 无 需 连 接 外 部 服务 器 
就 可 以 读 取 模 板 文件 。 

karma-ng-html2js-preprocessor 会 生成 什么 样 的 JavaScript 代 码 呢 ? 

示例 使 用 的 模板 文件 product-info.html 内 容 如 下 : 


<h3>Product Name: {{product.name}}<h3> 


karma-ng-html2js-preprocessor 会 将 模板 文件 转换 成 以 下 的 JavaScript 代 码 : 


(function (module) { 

try { 
module = angular.module ('demoApp.template'); 

} catch (e) { 
module = angular.module ('demoApp.template’, []); 

} 

module.run(['$templateCache', function (StemplateCache) { 
$templateCache.put ('app/directive/product-info.html', 

'<h3>Product Name: {{product.name}}<h3>'); 
11); 


}) 0: 


被 缓存 的 模板 文件 都 有 一 个 键 值 ， 这 个 键 值 是 模板 文件 从 服务 器 处 下 载 的 路 径 : 


StemplateCache.put ('app/directive/product-info.html', 


"<h3>Product Name: {{product.name}}<h3>'); 


本 示例 里 Karma 下 载 模板 文件 的 路 径 是 app/directive/product-info.html， 所 以 缓存 里 的 
键 值 也 是 app/directive/product-info.html。 但 是 这 可 能 和 运行 时 候 AngularJS 获 取 模 板 的 路 径 
不 同 。 

运行 时 AngularJS 从 Directive 的 templateUrl 字 段 指 定位 置 处 下 载 文件 ，templateUrl 路 径 
是 相对 于 引用 Directive 的 HTML 文 件 。 本 书 示例 假设 引用 productInfoDirective 的 HTMLIL 文 件 
在 项 目 根 目录 c:mgmock-demo， 所 以 templateUrl 是 app/directive/product-info html， 恰 巧 和 
Karma 读 取 的 文件 路 径 一 致 。 
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如 果 引 用 productInfoDirective 的 HTML 文 件 在 c:\ngmock-demo\app 目 录 ， 那 么 
templateUrl 就 需要 修改 为 directive/product-info.html， 这 种 情况 下 单元 测试 会 试图 使 用 路 径 
directive/product-info.html 在 缓存 里 寻找 模板 ， 但 缓存 里 的 键 值 却 是 app/directive/product- 
info.html。 为 了 解决 该 问题 ， 可 以 设置 karma-ng-html2js-preprocessor， 改 变 缓存 的 键 值 : 


ngHtml2JsPreprocessor: { 
// strip this from the file path 
stripPrefix: 'app/', 
moduleName: 'demoApp.template' 


}, 


以 上 示例 里 将 下 载 路 径 去 掉 app/ 后 作为 键 值 ， 这 样 键 值 即 与 templateUrl 保 持 相 同 。 
有 了 karma-ng-html2js-preprocessor 的 帮助 ， 测 试 productInfoDirective 就 变 得 简单 多 了 ， 
代码 如 下 : 


/* product-info.directive.spec.js */ 
describe('productInfoDirective', function() { 
var $compile, $scope, directiveElem; 
beforeEach(function() { 
angular.mock.module ('demoApp.template'); 
angular.mock.module('demoApp.directive'); 
angular.mock.inject (function(_$compile , _$rootsScope ) { 
Var element; 
$compile = _$compile ; 
$scope = _$rootScope .$new(); 
element = angular.element ('<div product-info-directive></div>'); 
directiveElem = $compile(element) ($scope); 
$scope. $apply(); 
]) 
Ds; 
it('should applied template', function() { 


Var h3Element = directiveElem.find('h3°'); 
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$scope.product = { name: "foo' }; 
$scope. $apply(); 


expect (h3Element .text ()) .togqual ('Product Name: fo0'); 





测试 Directive 需 要 注意 以 下 两 点 : 


四 需要 调用 angularmockmodule 加 载 karma-ng-html2js-preprocessor 生 成 的 


模块 。 该 模块 的 JavaScript 代 码 会 把 模板 文件 内 容 加 入 缓存 。 
@@ $compile 编 译 完 Directive 后 ， 需 要 调用 $scope.$apply 触 发 $digest 循 环 。 

5. 测试 Directive 的 Scope 

Directive 的 Scope 分 3 种 类 型 : 

@ 共享 : Directive 使 用 声明 它 的 HTML 元 素 的 Scope。 

@ 继承 : Directive 创 建 一 个 Scope， 新 的 Scope 继 承 自 声明 Directive 的 HTML 元 素 的 

Scope。 

@ 独立 : 创建 一 个 本 地 的 独立 Scope。 

测试 Scope 就 是 验证 Scope 对 象 的 状态 是 否 按 预期 改变 。 使 用 前 两 种 Scope 的 Directive 天 
然 可 以 和 外 界 交 换 数据 ， 但 是 对 于 本 地 独立 的 Scope 来 说 ， 需 要 有 另外 的 机 制 。 以 下 示例 
代码 定义 了 一 个 使 用 独立 Scope 的 Directive: 





angular.module('demoApp.directive') 


.directive('isolatedScopeDirective', function () { 
return { 
scope: { 
config: '=", 


notify: '@', 


onChange: '&' 
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这 个 独立 Scope 有 3 个 字段 ， 使 用 了 不 同 的 前 级 标识 符 来 引用 声明 Directive 的 HTMIL 元 
素 上 的 属性 : 
@ config: “=” 是 双向 数据 绑 定 前 组 标识 符 。 此 字段 用 于 使 Directive 本 地 Scope 的 字 
段 值 和 声明 Directive 的 HTML 元素 的 Scope 保 持 同步 。 
@ notify: “@” 是 单 向 数据 绑 定 前 缓 标识 符 。 此 字段 用 于 声明 Directive 的 HTML 元 
素 可 以 通过 notify 属 性 传 和 数据。 修改 Directive 本 地 Scope 的 notify 字 段 值 不 会 影响 
外 面 元 素 的 行为 。 
@ onChange: “及 ”是 绑 定 函数 方法 的 前 组 标识 符 。 在 Directive 内 调用 onChange 时 也 
会 调用 声明 Directive 的 HTML 元 素 上 绑 定 的 函数 方法 。 
为 了 测试 这 个 使 用 独立 Scope 的 Directive， 需 要 准备 相应 的 测试 数据 并 且 编 译 声 明 
Directive 的 元 素 。 示 例 代 码 如 下 : 


Var $compile, $scope, directiveElem; 
beforeEach (function () { 
angular.mock.module('demoApp.directive'); 
angular.mock.inject (function (_$compile , _$rootScope ) { 
var element; 
$compile = _$compile ; 
$scope = _$rootScope .$new(); 
$scope.config = { 
prop: 'value' 
1 
$scope.notify = true; 
$scope.onChange = jasmine.createSpy('onChange'); 
element = angular.element ('<isolated-scope-directive config="config" notify= 
"notify" on-change="onChange ()"></isolated-scope.directive>'); 
directiveElem = $compile(element) ($scope); 


$scope. $apply(); 


]) 
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测试 用 例如 下 : 


it('config on isolated scope should be two-way bound', function () { 
var isolatedScope = directiveElem.isolateScope(); 
isolatedScope.config.prop = "value2"; 
expect ($scope.config.prop) .toEqual ('value2'); 

Ds 

it('notify on isolated scope should be one-way bound', function () { 
var isolatedScope = directiveElem.isolateScope(); 
isolatedScope.notify = false; 
expect (5scope.notify) .toEqual (true) 

Ds: 

it('onChange should be a function', function () { 
Var isolatedScope = directiveElem.isolatesScope(); 
expect (typeof (isolatedScope.onChange)).toEqual('function'); 

]) 

it('should call onChange method of scope when invoked from isolated scope', function () { 
var isolatedScope = directiveElem.isolateScope(); 
isolatedScope.onChange (); 
expect ($scope.onChange) .toHaveBeenCalled() 


Th 


以 上 示例 通过 调用 angular.element.isolateScope 函 数 获得 Directive 的 本 地 独立 Scope， 通 
过 修改 独立 Scope 里 字段 的 值 来 验证 独立 Scope 的 行为 。 


6.3.5 测试 $timeout 和 $interval 


AngularJS 内 建 的 Stimeout 和 $interval 组 件 封装 了 JavaScript 的 setTimeout 和 setInterval 函 
数 ， 所 以 测试 使 用 内 建 Stimeout 和 $interval 的 AngularJS 应 用 时 ， 一 方面 开发 人 员 希 望 单 
元 测试 尽 可 能 快速 运行 (“ 快 进 ” 时 钟 ) ， 另 一 方面 也 希望 在 执行 断言 时 所 有 的 异步 回 
调 函 数 已 经 被 执行 完毕 。 为 了 实现 这 个 目的 ，ngMock 提 供 了 对 应 的 测试 专用 $timeout 和 
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$interval 组 件 ， 可 以 在 单元 测试 中 替代 内 建 的 $timeout 和 S$interval， 协 助 完成 测试 。 
1. $timeout 
执行 单元 测试 时 ，ngMock 测 试 专用 $timeout 会 蔡 换 AngularJS 内 建 的 $timeout， 并 且 它 
额外 提供 了 如 表 6-4 所 示 的 方法 。 
表 6-4 ngMock 的 $timeout 方 法 
廊 泛 描 述 





pe i = 
i 强制 执行 所 有 等 传 的 Stimeout 同调 卫 数 。 通 过 可 计数 delay 指 定 在 强制 执行 








verifyNoPendingTasks() ”| 执行 该 方法 时 ， 如 果 还 有 等 待 的 回调 函数 没有 被 执行 ， 那 么 该 函数 抛 出 异常 
以 下 示例 注入 了 一 个 hgMock 的 $timeout 实 例 ， 然 后 调用 它 的 flush 方 法 立即 执行 所 有 
$timeout 的 回调 函数 ， 确 保 在 执行 断言 expect 函 数 时 回调 函数 已 经 被 执行 。 





/* timeout.spec.js */ 
describe('Controller', function () { 
Var $controller; 
Var $timeout; 
beforeEach(function () { 
angular.mock.inject (function (_$controller , $timeout ) { 
$controller = _$controller ; 
Stimeout = _$timeout ; 
]) 7 
]) 
it('should set result to 5 with timeout', function () { 
var timeoutController; 
timeoutController = $controller (function ($timeout) { 
var vm = this; 
$timeout (function () { 
vm.result = 57 
}, 3000); 
bath 
$timeout.flush(); 


// this will throw an exception if there are any pending timeouts. 
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Stimeout .verifyNoPendingTasks (); 
expect (timeoutController.result) .toBe (5); 


Ds; 


2. $interval 
执行 单元 测试 时 ，ngMock 的 测试 专用 $interval 会 替换 AngularJS 内 建 的 Sinterval。 
ngMock 的 $interval 本 身 可 以 作为 一 个 函数 使 用 ， 同 时 它 额 外 提供 如 表 6-5 所 示 的 方法 协助 
测试 。 
表 6-5 ngMock 的 $interval 方 法 


取消 和 promise 关 联 的 任务 。 通 常 使 用 $interval 函 数 建立 一 个 任务 ， 该 函数 返 





一 个 promise。 如 果 要 取消 这 个 任务 ， 那么 可 以 将 这 个 promise 传 给 cancel 方 法 


强制 执行 所 有 等 待 的 Sinterval 任 务 。 通 过 可 选 参数 可 指定 强制 执行 前 等 待 (“ 快 
进 ”) 的 毫秒 数 





以 下 示例 代码 定义 了 CounterController， 执 行 start 函 数 启动 $interval 任 务 ， 计 数 器 每 
秒 加 1，10 秒 后 停止 。CounterController 也 提供 了 cancel 函 数 用 来 取消 $interval 任 务 (C\ 


ngmock-demo\app\interval\counter.controller.js) 。 


/* counter.controller.js */ 
(function () { 
angular.module('demoApp.interval’', []); 
angular.module('demoApp.interval') 
.controller('CounterController', CounterController); 
CounterController.$inject = ['$scope', '$interval']; 
function CounterController($scope, $interval) { 
var vm = this; 
Var counterInstance; 
vm.counter = 07 
vm.counterFunction = function () { 
vm.counter += 1; 


vm.start = function () { 
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counterInstance = $interval (vm.counterFunction, 1000, 10); 
}; 
vm.cancel = function () { 
if (angular.isDefined (counterInstance)) { 
$interval.cancel (counterInstance); 


counterInstance = undefined; 


jj 
// listen on DOM destroy (removal) event, and cancel the next UI update 
// to prevent updating time after the DOM element was removed. 
$scope.$on('$destroy', function () { 

vm.cancel (); 


]) 7 


}) 0; 


对 于 像 $interval 这 样 的 AngularJS 原 生 组 件 ， 大 多 数 情况 下 只 需要 测试 应 用 
程序 是 否 使 用 正确 的 参数 来 调用 它们 ， 而 不 会 测试 $interval 本 身 的 行为 ， 因 为 


这 些 组件 是 由 AngularJS 提 供 的 。 





以 下 示例 调用 jasmine.createSpy 创 建 了 一 个 新 的 spy 函 数 intervalSpy 以 跟踪 $interval 函 
数 。intervalSpy 并 不 会 调用 实际 的 $interval， 只 是 用 来 验证 应 用 程序 是 否 使 用 正确 的 参数 
来 调用 $interval。 





Var $controller, $interval, $scope; 
beforeEach (function () { 
angular.mock.module('demoApp.interval'); 
angular.mock.inject (function (_$controller , 
_$interval , 
_$rootscope ) { 
$controller = _$controller ; 


Sinterval = _$interval ; 
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有 时 候 开 发 人 员 也 会 测试 $interval 任 务 的 执行 情况 。 例 如 下 面 的 示例 代码 : 
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$interval.flush(3000); 

expect (counterController.counter) .toBe (4); 
counterController.cancel (); 

expect (intervalSpy.cancel.calls.count ()) .toBe (1); 


]) 


在 创建 spy 函 数 时 链 式 调用 了 .and.callThough()， 这 样 intervalSpy 不 仅 跟踪 了 $interval 的 
使 用 情况 ， 而 且 会 调用 实际 的 $interval; 两 次 调用 flush 方 法 快 进 “ 时 钟 ”， 然 后 验证 计数 
器 的 值 。 


6.3.6 测试 Promise 


Promise 是 JavaScript 异 步 编程 的 一 种 设计 模式 ， 也 是 AngularJS 使 用 的 模式 。 
AngularJS 中 所 有 的 Ajax 请 求 默 认 都 返回 一 个 Promise 对 象 。 测 试 HTTP 交 互 示例 中 创建 
的 basicHttpFactory， 其 getProductName 方 法 返回 的 就 是 Promise 对 象 ( 也 是 $http.get 返 回 
值 )。 示 例 代 码 如 下 : 





function basicHttpFactory($http) { 
return { 


getProductName: getProductName 


function getProductName (url) { 
return $http.get (url) 
.then (function (result) { 
return result.data.name; 


Ds; 


这 里 ， 创 建 一 个 使 用 basicHttpFactory 的 Controller (C:ngmock-demo\app\promise\ 
productcontrollerjs) ， 代 码 如 下 : 
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当 数 据 获取 成 功 时 ， 将 数据 赋值 于 name， 如 果 失 败 ， 则 定义 一 个 错误 信息 error。 为 了 
测试 这 个 使 用 Promise 的 Controller， 需 要 做 一 些 准备 工作 ， 代 码 如 下 : 
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以 上 代码 在 beforeEach 中 做 了 如 下 准备 工作 : 
(1) 注入 AngularJS 的 $q 组 件 。$q 是 AngularJS 中 自己 封装 的 一 种 Promise 实 现 。 这 里 
利用 它 创 建 一 个 受 控 的 deferred 对 象 。 
(2) 在 basicHttpFactory.getProductName 方 法 上 注册 一 个 Jasmine spy 函 数 。 当 应 用 程序 
调用 该 方法 时 ， 返 回 一 个 受 控 的 Promise 对 象 。 
(3) 创建 Controller 实 例 。 
测试 用 例 通过 调用 受 控 的 deferred 对 象 的 resolve 和 reject 方 法 来 改变 Promise 的 状态 ， 验 
证 Controller 的 执行 结果 。 
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expect (productController.error) .toBe ('There has been an error!'); 


6.3.7 测试 $log 


AngularJS 的 $log 组 件 用 来 输出 日 志 信 息 。AngularJS 推 荐 使 用 $log 取 代 console.log， 示 
例 代码 如 下 : 


Var 5$1og7 
beforeEach(function () { 
angular.mock.inject(function (_$log , $controller ) { 
$10g = _$1lo0g ; 
_$controller (function () { 
$10g.1log('standard lo0g'); 
$log.info('info lo0g'); 
$log.error('error 10g'); 
$log.warn('warn 1og")7 


$log.debug('some debug information'); 


ngMock 提 供 了 对 应 的 测试 专用 $log， 用 于 在 单元 测试 时 替换 内 建 的 Slog 组 件 。 
ngMock 的 $log 提 供 两 个 额外 的 方法 协助 测试 ， 如 表 6-6 所 示 。 
表 6-6 ngMock 的 $log 方 法 
方 法 描 述 








reset() 清除 所 有 日 志 信息 
assertEmptyO) | 检查 有 没有 日 志 信息 被 记录 。 如 果 有 日 志 信息 ， 该 方法 抛 出 异常 


测试 用 例如 下 : 











it('should write to log', function () { 


expect ($10g.10g.10gs[0]).toEqual(['standard 10g']); 
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expect ($10g.info.1logs[0]) .togqual(['info 10g']); 

expect ($10g.error.10gs[0]) .toEqual (['error 10g']); 

expect ($log.warn.1ogs[0]).toEqual(['warn 1og"])7 

expect ($10g.debug.10gs[0]).toEqual (['some debug information']); 
Ds 
it('should not call log (using reset)', function () { 

// this clears the logs 

$log.reset (); 

expect ($log.assertEmpty) .not.toThrow(); 


Ds; 


6.3.8 ”测试 $exceptionHandler 


如 果 在 AngularJS 表 达 式 里 有 未 被 捕获 的 异常 ， 那 么 这 个 异常 会 被 SexceptionHandler 处 
理 。$exceptionHandler 默 认 的 实现 是 调用 $log.error 把 异常 信息 输出 到 浏览 器 的 终端 窗口 。 

ngMock 提 供 了 对 应 的 测试 专用 $exceptionHandler， 它 不 使 用 $log， 而 是 将 异常 信息 保 
存在 一 个 数组 里 (errors 字 段 )。 可 以 通过 $exceptionHandlerProvider 改 变 这 个 默认 行为 ， 
让 $exceptionHandler 重 新 抛 出 异常 。 示 例 代码 如 下 : 


beforeEach (module (function ($exceptionHandlerProvider) { 
$exceptionHandlerProvider.mode('l10g'); 
元 
SexceptionHandlerProvider.mode('rethrow'); 


])) 2 


以 下 是 测试 代码 (C:ngmock-demo\app\exception\exception.spec.js): 


/* exception.spec.js */ 
describe('S$exceptionHandler', function () { 
var $log, $exceptionHandler, $timeout; 

beforeEach (function () { 


angular.mock.module (function ($exceptionHandlerProvider) { 
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以 上 示例 主要 做 了 下 列 工作 : 
(1) 使 用 $exceptionHandlerProvider 设 置 log 模 式 ， 这 样 异常 信息 会 被 保存 在 
S$exceptionHandler 实 例 的 errors 字 段 中 。 
(2) 在 $timeout 的 回调 函数 里 抛 出 异常 ， 这 是 为 了 演示 发 生 在 异步 代码 里 的 异常 。 
(3) 访问 SexceptionHandlererrors 验 证 异常 信息 。 


第 7 全 
我 码 履 盖 率 


A 


代码 覆盖 率 〈(Code Coverage) 是 软件 测试 中 的 一 种 审计 标准 ， 描 述 程序 中 源 代码 被 
测试 的 比例 和 程度 。 它 是 衡量 测试 工作 进展 情况 的 重要 指标 ， 通 常 被 用 来 发 现 没有 被 测试 
覆盖 的 代码 ， 但 是 它 本 身 不 能 完全 用 来 衡量 代码 质量 。 

本 章 将 介绍 : 

@ 代码 覆盖 率 的 衡量 标准 

@ 代码 覆盖 率 的 意义 

@ JavaScript 代 码 履 盖 率 工具 Istanbul 

@ 使 用 Karma 生 成 履 盖 率 报告 


7.1 代码 覆盖 率 的 衡量 标准 


代码 覆盖 率 的 衡量 标准 有 很 多 种 ， 这 里 介绍 最 常用 的 几 种 。 


7.1.1 函数 覆盖 率 ( Function Coverage ) 


函数 覆盖 率 ， 顾 名 思 义 ， 就 是 衡量 应 用 程序 里 每 个 函数 是 否 被 测试 代码 调用 过 。 
以 下 面 的 JavaScript 函 数 为 例 ， 这 个 函数 原本 只 是 将 参数 x 和 y 相 加 ， 但 是 开发 人 员 不 
小 心 写成 xfty/y， 所 以 这 是 个 有 缺陷 的 函数 。 


var inc = function (x, y) { 


if (y == undefined) y= 1; 
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return x + y/y; 


i 
如 果 想 要 达到 100% 函 数 覆 盖 率 ， 只 需 一 个 测试 ， 例 如 调用 inc(1) 就 可 以 了 。 如 果 函 数 
无 法 被 测试 代码 所 覆盖 ， 那 就 应 该 考虑 这 个 函数 是 否 真 的 需要 了 。 


7.1.2 语句 覆盖 率 ( Statement Coverage ) 


语句 覆盖 率 ， 有 人 也 把 它 称 为 行 覆盖 率 〈Line Coverage) ， 这 是 最 常见 的 一 种 覆盖 方 
就 是 衡量 被 测 代码 中 每 条 可 执行 语句 是 否 被 测试 所 覆盖 。 
例如 测试 中 调用 : 


区 


inc(1); 


inc 函 数 中 每 一 条 语句 (包括 y=1;) 都 执行 一 次 ， 它 的 语句 覆盖 率 就 是 100%。 

如 果 开 发 人 员 仅仅 满足 于 100% 语 句 覆 盖 率 ， 不 再 继续 编写 其 他 测试 用 例 对 函数 进行 
测试 ， 那 么 函数 里 的 缺陷 (return x+y/y:) 就 无 法 被 发 现 。 

在 已 经 满足 100% 语 句 覆 盖 率 的 情况 下， 继续 调 用 : 


inc (1,2):; 
或 者 : 


inc(1l, 0); 


则 函数 里 的 问题 就 被 暴露 出 来 ， 所 以 语句 覆盖 常 被 人 指责 为 “最 弱 的 覆盖 ”， 它 只 负责 履 
盖 代 码 中 的 执行 语句 ， 却 不 考虑 各 种 分 支 的 组 合 。 即 使 覆盖 率 达 到 100%， 也 很 难 换 来 好 
的 测试 效果 。 因 此 不 能 仅仅 使 用 语句 覆盖 率 来 衡量 软件 测试 的 质量 。 








语句 履 盖 率 和 行 履 盖 率 其 实 是 有 区 别 的 。 例 如 以 下 这 行 代码 ; 


x=1?y=1; 


虽然 只 有 一 行 (line) 代码 ， 但 是 有 两 条 语句 (statement ) 。 最 后 统计 的 履 盖 
率 两 者 可 能 会 不 同 。 
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7.1.3 分 支 覆盖 率 ( Branch Coverage ) 


分 支 覆盖 率 ， 也 称 为 判定 路 径 (decision-to-decision path， 或 DD-path) 覆盖 率 。 它 衡量 
程序 中 每 一 个 判定 的 分 支 是 否 都 被 测试 到 。 

例如 测试 中 调用 : 

inc(1); 


inc(1,2); 


则 测试 代码 满足 分 支 履 盖 率 100% 的 条 件 。 前 者 会 使 if 的 条 件 成 立 ， 后 者 使 的 逻辑 表达 式 
条 件 (y=undefined) 不 成 立 。 


7.1.4 条 件 覆 盖 率 ( Condition Coverage ) 


条 件 覆 盖 率 指 的 是 分 支 中 的 每 个 条 件 〈 与 ， 或 ， 非 逻辑 运算 中 的 每 一 个 条 件 判 断 ) 是 
否 被 测试 所 覆盖 ， 每 一 个 逻辑 表达 式 中 的 每 一 个 条 件 〈 无 法 再 分 解 的 逻辑 表达 式 ) 是 否 都 
有 执行 结果 为 tue 和 false 的 情形 。 

100% 条 件 覆 盖 率 并 不 意味 着 100% 分 支 覆盖 率 。 为 了 说 明 分 支 覆盖 率 和 条 件 覆 盖 率 的 
区 别 ， 考 虑 以 下 代码 : 


if(a && b) { 


} 


使 用 以 下 测试 条 件 可 以 得 到 100% 条 件 覆 盖 率 : 

® a=true; b=false; 

@ a=false; b=true; 

这 两 个 条 件 使 得 每 个 条 件 表达 式 (a 和 b》 都 有 true 和 false 的 结果 ， 但 是 它们 都 不 会 使 和 
的 逻辑 表达 式 (a && b) 成 立 ， 所 以 分 支 覆 盖 率 不 能 达到 100%。 


7.2 ”代码 覆盖 率 的 意义 


经 常 有 人 问 这 样 的 问题 : “做 单元 测试 时 代码 覆盖 率 应 该 达到 多 少 ? ”。Martin 
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Fowler 曾 一 篇 博客 "来 讨论 这 个 问题 ， 他 指出 : 把 测试 覆盖 (代码 覆盖 、 作 为 质 
eh Re ee 
7-1) 。 


Find Untested 


Gi 
ge XX 


图 7-1 Martin Fowler 对 代码 覆盖 的 观点 

这 里 阐述 一 下 作者 对 代码 覆盖 率 的 看 法 : 

(1) 代码 覆盖 率 是 用 来 发 现 没 有 被 测试 覆盖 的 代码 ， 不 能 完全 用 来 衡量 代码 质量 。 

(2) 高 百分比 的 代码 覆盖 率 不 能 代表 高 质量 的 测试 ， 但 是 低 百 分 比 的 代码 覆盖 率 一 
定 意味 着 测试 不 完整 。 

(3) 通过 分 析 未 被 测试 覆盖 的 代码 ， 可 以 验证 前 期 测试 设计 是 否 充分 。 如 果 这 些 代 
码 是 测试 设计 的 盲点 ， 可 以 补充 测试 用 例 设 计 。 

(4) 不 能 盲目 追求 代码 覆盖 率 。 达 到 代码 覆盖 率 目 标 是 良好 测试 的 结果 ， 而 不 是 目 
标本 身 。 


7.3 ” JavaScript 代 码 覆 盖 率 工具 Istanbul 


Istanbul 是 目前 比较 流行 的 JavaScript 测 试 覆盖 率 工具 。 它 的 名 字 取 自 土耳其 的 伊 斯 坦 
布尔 ， 因 为 那里 的 地 毯 世界 闻名 ， 而 地 毯 是 用 来 覆盖 的 2 。 

Istanbul 可 以 无 缝 地 对 JavaScript 项 目 进 行 覆盖 率 统计 。 开 发 人 员 编写 单元 测试 用 例 
时 ， 不 需要 为 支持 覆盖 率 统计 编写 额外 的 代码 ， 测 试用 例 也 无 需 修 改 就 可 以 直接 使 用 
Istanbul 来 统计 获 盖 率 情况 ， 而 且 Istanbul 会 生成 一 份 漂亮 的 覆盖 率 报告 ， 准 确 地 标记 出 哪 
些 代 码 没 有 被 覆盖 到 。 


@® MartinFowler. TestCoverage[OL]. 2012. http://martinfowler.com/bliki/TestCoverage.html. 
© Krishnan Anantheswaran. Why the funky name[OL]. [2016]. https://github.com/gotwarlost/istanbul#why- 
the-funky-name. 
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7.3.1 安装 lstanbul 


Istanbul 是 一 个 hpm 软 件 包 ， 可 以 使 用 如 下 npm 命 令 进行 全 局 安装 : 





运行 istanbul help 命 令 可 列 出 istanbul 命 令 的 帮助 信息 : 





7.3.2 ”覆盖 率 测试 


将 以 下 代码 保存 为 c:\temp\test.js。 





运行 命令 istanbul cover， 得 到 代码 覆盖 率 : 
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Statements : 100% { 5/5 ) 
Branches : 50% ( 1/2 ) 
Functions 3: 100% ( 1/1 ) 
Lines : 100% ( 4/4 ) 


Istanbul 会 统计 4 个 覆盖 率 : 语句 覆盖 率 、 分 支 覆 盖 率 、 函 数 覆 盖 率 和 行 覆 盖 率 。 以 上 
示例 里 有 两 个 分 支 ， 但 是 inc(1) 只 执行 了 一 个 ， 所 以 分 支 履 盖 率 是 50%， 其 他 都 是 100%。 

istanbul cover 命 令 同 时 在 当前 目录 下 生成 一 个 coverage 子 目录 ， 其 中 的 coverage.json 
包含 了 覆盖 率 的 原始 数据 。 使 用 浏览 器 打开 coverage\lcov-report\index.html 文 件 ， 可 以 看 到 
整个 目录 的 覆盖 率 报告 ， 如 图 7-2 所 示 。 


100% Statements ‘$s 50% Branches ‘Wa 100% Functions ‘i 100% Lines ‘als 


File ~ Statements Branches Functions Lines 
termp/ EE 100% | 5/5 50% | 1/2 100% | 11 100% | 4/4 
图 7-2 “Istanbul 覆 盖 率 报告 ( 目录 ) 
单 击 图 7-2 所 示 目 录 名 temp， 可 以 看 到 该 目录 下 所 有 文件 的 覆盖 率 情 况 ， 如 图 7-3 
所 示 。 
all files temp/ 
100% Statements 5 50% Branches [a 100% Functions I 100% Lines 8 
Ee 
File ~ Statements Branches Functions Lines 


testjs EE 100% | 5/5 50% | 1/2 100% | 1 100% | 4/4 


图 7-3 lstanbul 覆 盖 率 报告 ( 所 有 文件 ) 


单 击 图 7-3 所 示 的 testjs 项 ， 可 以 看 到 该 文件 详细 的 覆盖 信息 ， 如 图 7-4 所 示 。 其 中 标记 
E 说 明 if 语 句 的 else 分 支 没有 被 执行 。 


@® Krishnan Anantheswaran. Format of coverage.json[OL]. [2016]. https://github.com/gotwarlost/istanbul/blob/ 
master/coverage.json.md. 
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allfiles / temp/ test.js 
100% Statements ‘s/s 50% Branches 





Jx var inc = function (x, y) { 
1x 国 if (y == undefined) y = 1; 
1 returnx+y/y; 

了 


7 jz inc(1); 





图 7-4 lstanbul 覆 盖 率 报告 ( 单个 文件 ) 

在 文件 覆盖 率 报告 里 : 
标识 EE 说 明 在 if 语 句 里 ，if 分 支 已 经 执行 过 但 是 else 分 支 没有 执行 。 
标识 I[ 和 标识 EE 相反 。if 分 支 没有 执行 过 。 


最 左边 那 列 Nx 标记 (例如 1x) 说 明 这 行 语句 被 执行 过 的 次 数 。 
没有 被 执行 过 的 行 或 代码 会 用 红色 加 亮 。 





7.3.3 ”覆盖 率 辣 值 


istanbul check-coverage 命 令 用 来 设置 阔 值 ， 同 时 将 coverage.json 里 的 结果 和 浆 值 进行 
比较 ， 检 查 当前 代码 是 否 达标 。 


C:\temp>istanbul check-coverage --branches 90 


ERROR: Coverage for branches (50%) does not meet global threshold (90%) 


以 上 命令 设置 了 分 支 覆盖 率 阔 值 90%。 显 然 前 面 的 覆盖 率 统 计 没 有 通过 ， 因 为 它 的 分 
支 绪 盖 率 是 50%。 
除了 百分比 阔 值 ， 还 可 以 使 用 负数 设置 绝对 值 阔 值 ， 例 如 : 


istanbul check-coverage --statements -1 


以 上 命令 表示 只 允许 有 一 个 未 被 覆盖 的 指令 。 


7.3.4 忽略 代码 


Istanbul 提 供 注释 语法 ， 人 允许 部 分 代码 不 计 入 覆盖 率 。 
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@@ 忽略 if 分 支 ， 代 码 如 下 : 


/* istanbul ignore if */ 


if (hardToReproduceError)) { 


return callback (hardToReproduceError); 


@ 忽略 else 分 支 ， 代码 如 下 : 


/* istanbul ignore else */ 


if (foo.hasOwnProperty('bar')) { 


// do something 


@ 忽略 注释 后 面 的 内 容 ， 代 码 如 下 : 


Var object = parameter || /* istanbul ignore next */ {}; 


以 上 代码 是 为 object 指 定 默认 值 〈 一 个 空 对 象 ) 。 如 果 不 想 为 object 是 空 对 象 的 情况 写 
测试 ， 可 以 用 注释 /* istanbul ignore next */， 不 将 这 种 情况 计 入 覆盖 率 。 


7.3.5 1stanbul 工 作 原 理 


Istanbul 的 工作 原理 如 图 7-5 所 示 。 


JavaScript 


源 代码 








Esprima 








一 一 ”注入 统计 代码 ”一 














Escodegen 














图 7-5 ”Istanbul 的 工作 原理 


转换 后 代码 


(1) 使 用 开源 工具 Esprima? 对 JavaScript 源 代码 进行 语法 分 析 ， 生 成 语法 树 。 
(2) 在 语法 树 相应 的 位 置 注入 统计 代码 。 
(3) 使 用 开源 工具 Escodegen“ 根据 注入 统计 代码 后 的 语法 树 生成 对 应 的 JavaScript 代 
码 ， 即 转换 之 后 的 代码 。 


© Esprima. Esprima[OL]. [2016]. http://esprima.org/. 
@ Escodegen. ECMAScript code generator[OL]. [2016]. https://github.com/estools/escodegen. 
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(4) 执行 转换 后 的 代码 。 被 注入 的 统计 代码 也 会 被 执行 ， 生 成 统计 信息 。 
(5) 根据 覆盖 率 信息 生成 特定 格式 的 报告 。 


7.4 使 用 Karma 生 成 覆盖 率 报 告 


可 以 使 用 Istanbul 命 令 生成 覆盖 率 报告 ， 也 可 以 将 这 个 功能 集成 到 Karma 中 。 如 果 想 要 
Karma 生 成 覆盖 率 报告 ， 必 须 安 装 插件 karma-coverage?， 该 插件 底层 使 用 Istanbul 生 成 覆盖 
率 报告 。 安 装 该 插件 的 命令 如 下 : 


npm install karma-coverage --save-dev 


如 果 使 用 karma-coverage， 不 需要 全 局 安装 Istanbul。 


这 里 还 是 使 用 第 6 章 测试 AngularJS 的 项 目 。 在 c:\ngmock-demo 目 录 下 安装 karma- 
coverage， 然 后 修改 karma.configjs 文 件 。 
(1) 在 proprocessors 字 段 中 添加 coverage， 代 码 如 下 : 


preprocessors: { 
"app/directive/*.html': ['ng-html2js'], 
app/**/! (*,spec) .js':['coverage'] 


}, 


'app/**/!(*.spec)jjs' 意 思 是 除了 *.spec.js 以 外 的 所 有 js 文件 。 排 除 spec.js 文 件 是 因为 这 里 
只 想 统 计 应 用 程序 代码 的 覆盖 率 ， 而 不 是 测试 用 例 代 码 的 覆盖 率 。 
(2) 在 reporters 字 段 中 添加 'coverage'。 


reporters: ['progress','coverage'], 


QO karma-coverage. A Karma plugin Generate code coverage[OL]. [2016]. https://github.com/karma-runner/ 
karma-coverage. 
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(3) 建立 一 个 新 字段 coverageReporter。 这 个 字段 设置 报告 的 格式 是 HTML， 输 出 路 
径 是 ./report_output/coverage， 代 码 如 下 : 


coverageReporter:{ 
type: 'html', 
dir: './report output/coverage' 


] 


在 命令 控制 台 运行 karma start， 然 后 使 用 浏览 器 打开 c:\ngmock-demo\report_output\ 
coverage\< 浏 览 器 >\index.html， 就 能 得 到 AngularJS 项 目 在 某 个 浏览 器 下 运行 的 代码 覆盖 率 
告 ， 如 图 7-6 所 示 。 





1 

100% Statements 国 疯 100% Sranches 国 到 。 100% Functions 再。 100% Lines 略 男 
Flle < Statements Branches Functions Lines 
basic/ Es 100% 1010 100% | ol0 100% 5/5 100% 1010 
controller/ Fo 100% 77 100% | 0/0 100% 22 100% 77 
directve/ =e 100% 24/24 100% | ol0 100% | 16/16 100% | 24/24 
http/ = 100% 9/9 100% | 00 100% 414 100% 99 
intervaly 5] 100% -18/18 100% | 212 100% 616 100% | -18/18 
module/ ess 100% 3 100% | ol0 100% 1 100% 313 
promise/ L== 100% 99 100% | 0/0 100% 414 100% 9/9 
Scopey = 100% 6/6 100% | 00 100% 212 100% 6/6 


图 7-6 ”Karma 生 成 的 代码 覆盖 率 报告 


如 果 在 使 用 karma-coverage 的 情况 下 想 要 调试 JavaScript 代 码 ， 就 会 注意 到 源 代码 已 经 
变 得 面目 全 非 ， 如 图 7-7 所 示 ， 这 是 因为 此 时 的 JavaScript 代 码 是 注入 了 统计 代码 并 且 经 过 
转换 的 源 代码 。 如 果 想 要 调试 JavaScript 源 代码 ， 建 议 在 karma.confjs 里 暂时 注释 掉 karma- 
coverage 的 相关 设置 。 


民 | Hements Console Sources Network Timeline Profiles Application Security Audits 
































Sources | Content scripts 为 : 司 | productservicejs x G 
mee 2 4y]Z4NSHwgGFH7UiB8kSA = (Fi ))0) 月 
2| var _cov_ray]z4NSHwgGFH7Uis8kSA = (Function('return this'))(); 
TO localhost9e76 引 if (!_cov_r4y]Z4NSHwgGFH7Ui88kSA.。_ coverage_) { cov_r4y]Z4NSHwgGFH7UisaksSA. 国 
» Ml base 4| _cov_r4y]Z4NSHwgGFH7Ui88kSA = __ cov_ray]Z4NSHwEGFH7UiSBkSA.__ coverage__; 
Bm a S|if 〈!(_cov_ray]Z4NSHwgGFH7Ui8skSA["C:\Vngmock-demo\Vvapp\\Vbasic\\product.servic 国 
6| cov_r4yJZANSHwgGFH7UiS8KSAL"C:\\ngmock-demo\\app\\basic\\product.service.j 
a contextjs 7|} | 
debug 下 | cov_rayJz4NSHwegGFH7Ui88kSA = cov_r4y]Z4NSHwgGFH7Ui8SkSA['C:VWenmock-demo\Wval 峡 
引 二 cov_r4y]Z4NSHwgGFH7Ui88kSA.s["1']++;(function(){"use strict'j_cov_r4y]Z4NSHwi 
PO (no domain) 19 





图 7-7 ”使 用 karma-coverage 后 JavaScript 源 代码 
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第 8 登 ~ 
走 进 自动 化 测试 全 
A 


长 期 以 来 ， 在 Web 应 用 的 端 到 端 测试 中 ， 手 工 测试 一 直 占 据 绝 大 多 数 比 例 ， 原 因 是 其 
简单 易 行 ， 门 槛 较 低 。 但 在 现代 快速 迭代 的 开发 模式 下 ， 手 工 测试 已 经 远 远 无 法 满足 需 
求 。 大 量 的 重复 性 工作 ， 低 下 的 测试 效率 导致 软件 质量 无 法 保证 。 

特别 是 Web 前 端的 测试 环境 复杂 ， 兼 容 性 要 求 高 。 很 难 想象 有 哪个 公司 能 够 持续 投入 
巨大 的 人 力 成 本 ， 在 手工 测试 领域 全 面 覆 盖 Windows、Mac OS 和 Linux， 以 及 不 同 的 浏览 
器 包括 IE、Edge、Chrome 和 Firefox 等 。 

本 章 将 带领 读者 走 进 Web 应 用 的 自动 化 测试 领域 ， 了 解 端 到 端 测 试 自 动 化 的 相关 
技术 。 

本 章 将 介绍 : 

@ 自动 化 测试 的 优势 

@ 自动 化 测试 实施 流程 

@ 自动 化 测试 转型 的 适应 性 

@ 测试 工具 的 选择 





8.1 自动 化 测试 的 优势 


自动 化 的 端 到 端 测试 是 把 传统 的 手工 测试 转化 为 机 器 执行 的 一 种 自动 化 过 程 ， 但 并 不 
会 停止 在 端 到 端 测试 上 的 人 力 投 入 ， 恰 恰 相 反 ， 测 试 人 员 不 仅 不 可 或 缺 ， 而 且 将 发 展 成 为 
设计 者 ， 定 义 机 器 行为 ， 让 机 器 驱动 测试 。 由 于 具体 测试 的 执行 者 变 为 了 机 器 ， 因 此 它 可 
以 持续 地 运行 测试 代码 ， 节 省 了 测试 人 员 的 重复 劳动 ， 为 开发 带 来 诸多 手工 测试 无 法 企及 
的 好 处 。 
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1. 充分 利用 硬件 资源 

理想 的 自动 化 测试 能 够 按 计 划 完 全 自动 地 运行 ， 将 烦琐 的 任务 自动 化 。 在 开发 人 员 和 
测试 人 员 不 可 能 实现 24 小 时 轮流 工作 的 情况 下 ， 自 动 化 测试 可 以 一 刻 不 停 地 运行 。 这 样 能 
够 充分 地 利用 硬件 资源 ， 避 免 开 发 和 测试 人 员 间 的 无 效 等 待 。 

2. 充分 调动 测试 人 员 的 积极 性 

自动 化 测试 使 测试 人 员 从 烦琐 的 重复 性 工作 中 解脱 出 来 ， 可 以 投入 更 多 精力 到 自动 化 
测试 框架 和 用 例 的 编写 中 。 这 将 充分 调动 测试 人 员 的 工作 热情 ， 进 一 步 提高 测试 的 效率 和 
可 靠 性 。 

3. 有 效 实 施 数据 驱动 的 测试 

自动 化 测试 带 来 了 测试 效率 的 极 大 提升 ， 使 数据 驱动 的 测试 有 了 实施 条 件 ， 让 同样 的 
测试 用 例 使 用 不 同 的 测试 数据 作为 输入 ， 提 高 了 测试 用 例 的 广度 。 

4. 高 效 的 回归 测试 

采用 敏捷 或 迭代 式 开发 意味 着 频繁 的 发 布 ， 必 须 用 高 频 的 回归 测试 来 保证 功能 的 完 
整 和 一 致 性 。 由 于 回归 测试 的 动作 和 用 例 是 已 经 设计 好 的 ， 测 试 期 望 的 结果 完全 可 以 预料 
的 ， 因 此 回归 测试 自动 化 效果 会 非常 显著 ， 这 不 仅 可 以 缩短 测试 时 间 ， 同 时 也 能 够 让 测试 
人 员 将 更 多 的 精力 投入 到 新 功能 的 开发 测试 中 。 

5. 一 致 性 

因为 每 次 测试 运行 的 脚本 是 相同 的 ， 所 以 自动 化 测试 保证 了 测试 环境 、 测 试 路 径 的 一 
致 性 ， 很 容易 发 现 被 测 软件 的 任何 改变 ， 而 手工 测试 这 是 很 难 做 到 的 。 

6. 测试 脚本 具有 可 复 用 性 

自动 化 测试 通常 采用 脚本 技术 ， 编 写 脚本 实际 上 是 一 个 开发 过 程 。 一 个 软件 尽管 有 多 
个 功能 点 ， 但 这 些 功能 点 在 执行 路 径 上 会 有 重合、 复 用 的 情况 。 所 以 只 需要 对 相关 测试 脚 
本 做 少量 修改 ， 即 可 在 不 同 的 测试 过 程 中 重复 使 用 。 


8.2 ”自动 化 测试 实施 流程 


自动 化 测试 系统 针对 不 同 的 实际 项 目 ， 可 以 有 不 同 的 实施 方法 ， 但 一 般 都 由 以 下 步骤 
组 成 。 
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1. 自动 化 测试 适应 性 分 析 

虽然 自动 化 测试 有 很 多 手工 测试 无 法 比拟 的 优点 ， 但 100% 的 自动 化 测试 只 是 一 个 理 
想 目标 ， 一 味 追 求 自动 化 可 能 导致 企业 成 本 上 升 ， 效 果 甚至 会 低 于 手工 测试 。 所 以 ， 在 实 
施 自 动 化 测试 之 前 需要 进行 适应 性 分 析 ， 明 确 当前 的 项 目 是 否 适合 进行 自动 化 测试 。 

2. 自动 化 测试 需求 分 析 

当 项 目 满足 了 自动 化 测试 的 要 求 ， 并 决定 将 在 该 项 目 中 使 用 自动 化 测试 技术 后 ， 即 可 
开始 进行 自动 化 测试 需求 分 析 。 此 步骤 需要 确定 自动 化 测试 的 范围 以 及 相应 的 测试 用 例 和 
测试 数据 ， 并 形成 详细 的 文档 ， 以 便于 后 续 自 动 化 测试 框架 的 建立 。 

3. 自动 化 测试 框架 的 搭建 

搭建 自动 化 测试 框架 就 如 进行 软件 架构 一 般 ， 它 定义 了 该 测试 框架 的 基础 架构 ， 构 建 
环境 以 及 实施 工具 。 同 时 ， 测 试 框架 也 包括 对 公用 环境 的 包装 ， 即 把 各 测试 用 例会 用 到 的 
相同 的 要 素 独立 包装 ， 在 各 个 测试 用 例 中 灵活 调用 ， 这 样 也 能 增强 脚本 的 可 维护 性 。 

4. 设计 与 编写 测试 脚本 

这 一 步骤 是 ， 基 于 已 搭建 好 的 自动 化 测试 框架 ， 针 对 每 个 测试 用 例 编写 测试 脚本 。 

5. 测试 的 持续 集成 

持续 集成 是 一 个 频繁 持续 在 团队 内 进行 业务 集成 、 自 我 反馈 的 软件 开发 实践 。 在 测试 
领域 里 ， 持 续集 成 负责 把 下 拉 代 码 、 编 译 、 驱 动 自动 化 测试 脚本 和 生成 测试 报告 等 步骤 用 
一 体 化 的 方案 进行 构建 。 在 配置 持续 集成 的 过 程 中 ， 需 要 综合 考虑 持续 集成 工具 的 选择 、 
与 版 本 控制 库 的 交互 以 及 报告 格式 等 。 

在 一 个 完善 成 熟 的 自动 化 测试 解决 方案 里 ， 以 上 5 个 步骤 缺 一 不 可 ， 而 且 每 个 步骤 都 
需要 专业 的 开发 测试 人 员 参 与 其 中 ， 进 行 定制 开发 ， 这 也 正 是 测试 人 员 发 挥 聪明 才智 的 地 
方 。 简 而 言 之 ， 自 动 化 测试 将 测试 人 员 从 重复 低 效 的 手工 测试 中 解脱 出 来 ， 角 色 转 变 为 测 
试 的 设计 者 ， 指 挥 机 器 完成 测试 工作 。 





8.3 ”自动 化 测试 转型 的 适应 性 


尽管 自动 化 测试 有 诸多 优点 ， 但 在 测试 转型 的 时 候 ， 需 要 明确 转型 的 目的 不 是 彻底 抛 
弃 手工 测试 ， 而 是 让 测试 人 员 从 烦琐 重复 的 机 械 式 测试 过 程 中 解脱 出 来 ， 把 有 限 的 时 间 和 
精力 放 到 更 有 价值 的 地 方 ， 进 而 发 现 更 多 的 产品 缺陷 。 
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需要 注意 的 是 ， 并 不 是 所 有 的 功能 都 能 够 自动 化 。 对 于 某 些 类 型 的 测试 ， 例 如 易 用 性 
和 界面 友好 性 方面 的 探索 型 测试 很 难 通过 自动 化 测试 进行 验证 ， 使 用 手工 测试 更 能 发 挥 测 
试 人 员 的 想象 力 ， 效 果 更 好 。 所 以 ， 自 动 化 测试 虽然 可 以 降低 手工 测试 的 工作 量 ， 但 并 不 
能 完全 取代 手工 测试 。100% 的 自动 化 测试 是 不 存在 的 ， 即 便 非 常 成 熟 的 商用 软件 ， 其 测 
试 自动 化 率 也 很 难 超过 80%。 

一 般 而 言 ， 具 有 以 下 特点 的 项 目 比 较 容易 实施 自动 化 测试 。 

1. 需求 较 稳 定 

测试 框架 和 脚本 的 稳定 性 决定 了 自动 化 测试 的 维护 成 本 。 编 写 测试 脚本 身 是 一 个 开 
发 代码 的 过 程 ， 需 要 不 断 修 改 、 调 试 ， 甚 至 必要 的 时 候 要 修改 测试 框架 ， 如果 开 发 过 程 中 
需求 变动 过 于 频繁 ， 则 测试 人 员 需 要 根据 需求 变化 不 断 更 新 测试 用 例 和 相关 脚本 。 也 就 是 
说 ， 频 繁 的 需求 变化 不 仅 会 导致 频繁 的 脚本 开发 和 修改 ， 也 会 带 来 高 昂 的 成 本 ， 如 果 该 花 
费 高 于 传统 的 手工 测试 ， 那 么 自动 化 测试 对 于 该 项 目 就 是 不 合适 的 。 

如 果 项 目 中 某 些 模块 相对 稳定 ， 而 另外 一 些 模块 需求 变动 比较 大 。 建 议 对 相对 稳定 的 
模块 进行 自动 化 测试 ， 而 更 新 频繁 的 仍 坚 持 用 手工 测试 ， 待 其 稳定 后 再 进行 自动 化 。 

2. 较 大 型 项 目 

自动 化 测试 前 期 对 需求 的 分 析 、 对 自动 化 测试 框架 的 设计 集成 ， 进 行 脚本 的 编写 与 调 
试 均 需 要 较 长 的 时 间 来 完成 。 

一 般 而 言 ， 较 大 型 的 项 目 更 容易 体现 自动 化 测试 的 价值 。 因 为 这 类 项 目 周期 长 ， 规 
模 大 ， 自 动 化 测试 在 前 期 的 框架 设计 和 脚本 编写 方面 的 投入 在 后 期 会 更 加 显示 其 优势 。 特 
别 是 高 效 的 回归 测试 保证 测试 人 员 能 够 投入 到 新 功能 的 验证 中 。 如 果 项 目 较 小 ， 周 期 比较 
短 ， 则 没有 足够 的 时 间 和 必要 去 支持 这 样 的 过 程 ， 手 工 测试 反而 可 能 更 敏捷 更 合适 。 

3. 测试 人 员 良 好 的 编程 经 验 

良好 的 自动 化 测试 实施 离 不 开 测 试 人 员 的 工作 。 由 于 自动 化 测试 脚本 的 编写 实际 是 一 
个 开发 的 过 程 ， 无 论 是 C#、Java 或 JavaScript 都 需要 测试 人 员 对 相应 的 编程 语言 和 原理 有 一 
定 的 了 解 。 测 试 人 员 良 好 的 编程 经 验 是 保证 自动 化 测试 实施 的 基础 。 

4. 良好 的 团队 合作 

要 保证 自动 化 测试 的 成 功 实施 ， 绝 不 是 拍 拍 脑袋 说 干 就 一 定 能 干 好 的 ， 它 不 仅 涉及 测 
试 工作 本 身 流程 上 、 组 织 结构 上 的 调整 与 改进 ， 甚 至 也 包括 需求 、 设 计 、 开 发 、 维 护 及 配 
置 管理 等 各 个 角色 之 间 的 配合 ， 需 要 多 部 门 紧密 合作 ， 包 括 开 发 、 测 试 、 运 维 等 。 如 果 各 
个 不 同 的 团队 各 自 为 政 没有 配合 的 话 ， 一 定 会 在 实施 过 程 中 处 处 碰壁 ， 既 定 的 实施 方法 也 
无 法 如 期 开展 。 
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8.4 测试 工具 的 选择 





目前 市 场 上 可 供 选择 的 自动 化 测试 工具 很 多 ， 各 有 特点 。 由 于 企业 内 部 一 般 都 存在 
许多 不 同 种 类 的 应 用 平台 ， 所 用 到 的 开发 技术 也 不 尽 相 同 ， 甚 至 一 个 应 用 就 使 用 了 多 项 技 
术 ， 或 同一 应 用 的 不 同 版 本 之 间 存 在 技术 差异 。 所 以 选择 自动 化 测试 的 工具 必须 深刻 理解 
这 一 选择 的 适应 性 以 及 诸多 方面 的 风险 和 成 本 开销 。 如 果 中 途 更 换 测 试 工具 ， 那 么 前 期 的 
工作 成 果 可 能 都 付 之 东 流 ， 带 来 极 大 的 浪费 。 

根据 作者 的 经 验 ， 在 企业 进行 自动 化 测试 工具 选 型 的 时 候 ， 可 以 从 以 下 5 个 方面 综合 
考虑 : 

(1) 尽 可 能 多 地 覆盖 主流 操作 系统 和 浏览 器 ， 从 而 降低 产品 投资 和 团队 的 学 习 成 本 。 

(2) 有 良好 的 性 价 比 ， 应 充分 关注 产品 的 支持 服务 和 售后 服务 的 质量 与 水 平 。 

(3) 测试 工具 本 身 使 用 的 技术 与 当前 的 技术 发 展 潮流 匹配 ， 避 免 过 于 陈旧 冷门 的 开 
发 语言 。 

(4) 尽量 选择 趋 于 主流 成 熟 的 产品 ， 以 便 通过 行业 间 的 交流 或 者 社区 支持 等 方式 获 
得 更 为 广泛 的 经 验 分 享 和 学 习 资源 。 

(5) 良好 的 可 扩展 性 ， 特 别 是 对 持续 集成 工具 的 支持 。 

市 场 上 的 自动 化 测试 工具 很 多 ， 主 流 的 包括 Rational Functional Tester (RFT) 、Quick 
Test Professional (QTP) 、TestComplete 和 Selenium 等 。 表 8-1 列 出 了 这 4 种 工具 的 主要 特点 
和 区 别 。 

表 8-1 ”自动 化 测试 工具 特点 比较 
































比较 项 RFT QTP TestComplete Selenium 

i pt ys seni Java、C#、Ruby、Python、 
编程 语言 Java、C# VBScript a C++Script、 Pedl、PHP、JavaSarint 
浏览 器 支持 。 | 六 MO、 | 站 stCoome | 所 有 主流 浏览 器 所 有 主流 浏览 器 
费用 付费 付费 付费 免费 
操作 系统 EY Sy Windows Windows 所 有 主流 平台 

JIDUX 

工程 师 能 力 要 求 | 较 低 较 低 较 低 较 高 
技术 支持 IBM HP SmartBear 开源 社区 
支持 桌面 程序 | 是 是 是 需要 额外 驱动 进行 支持 
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基于 以 上 比较 可 以 看 出 ，RFT、QTP 和 TestComplete 对 桌面 应 用 有 着 较 好 的 原生 支持 
并 能 获得 官方 技术 支持 ， 但 在 Web 前 端 方面 ，Selenium 无 论 是 对 浏览 器 和 操作 系统 的 支持 
还 是 编程 语言 的 选择 ， 都 有 着 更 广 的 覆盖 面 。 特 别 是 作为 开源 项 目 ， 免 费 更 是 Selenium 的 
一 个 极 具 吸引 力 的 加 分 项 。 所 以 ， 在 进行 前 端 测试 工具 选 型 的 时 候 ， 如 果 团 队 具 备 相当 的 
编程 能 力 ， 可 以 考虑 选择 Selenium 作 为 项 目的 自动 化 测试 工具 。 


ZU 


第 9 竟 
初 识 Selenium 


A 


Selenium 的 中 文 意思 为 “ 硒 ”， 是 一 种 非 金属 化 学 元 素 。 硒 既是 工业 催化 剂 ， 也 是 动 
植物 必需 的 微量 矿物 质 营 养 素 。 简 而 言 之 ， 硒 摄 入 量 不 多 却 必 不 可 少 ， 往 往 起 到 魔术 般 
的 有 益 作用 ， 而 这 也 正 是 测试 工具 Selenium 当 年 的 创造 者 们 所 期 望 的 。 通 过 Selenium， 可 
以 将 浏览 器 自动 运行 起 来 模拟 用 户 操作 ， 从 而 验证 Web 应 用 的 行为 。 如 今 ， 纵 观 业 界 对 
Selenium 的 认可 和 火爆 程度 ， 当 年 的 期 望 显然 已 经 实现 。 那 么 是 谁 创造 了 Selenium， 它 又 
是 如 何 发 展 成 熟 起 来 的 呢 ? 

本 章 将 介绍 : 

@ Selenium 发 展 历史 

@ Selenium 工 具 套装 


9.1 Selenium 发 展 历史 


Selenium 是 2004 年 由 Jason Huggins 发 起 的 一 个 项 目 "。 当 时 他 在 ThoughtWorks 参 与 开 
发 和 测试 一 个 公司 内 部 系统 ， 该 系统 使 用 了 大 量 的 JavaScript。 那 时 候 正 还 是 主流 浏览 器 ， 
同时 ThoughtWorks 也 使 用 了 一 些 其 他 浏览 器 ， 特 别 是 Mozilla 系 列 ， 如 果 员 工 发 现 该 系统 在 
自己 的 浏览 器 中 无 法 正常 运行 ， 就 会 提交 缺陷 。 多 样 而 复杂 的 使 用 环境 让 该 项 目 进展 非常 
缓慢 ， 为 了 不 让 自己 的 时 间 浪 费 在 无 聊 的 重复 性 工作 中 ，Jason 希 望 有 更 好 的 方案 提升 测 
试 效率 。 但 当时 的 测试 工具 主要 关注 正 浏览 器 ， 无 法 充分 满足 该 系统 的 所 有 使 用 环境 。 另 
一 方面 ， 购 买 商业 工具 授权 的 成 本 也 会 耗 尽 这 个 小 型 内 部 项 目的 有 限 预 算 。 





人 SeleniumHQ. Selenium History[OL]. [2016]. http://www.seleniumhq.org/about/history.jsp. 
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Jason 考 虑 到 该 系统 所 有 用 到 的 浏览 器 都 支持 JavaScript， 基 于 这 一 点 ， 他 带领 团队 创 
造 性 地 研发 了 一 个 JavaScript 程 序 库 与 页 面 进行 交互 ， 通 过 这 个 程序 库 实现 对 多 个 浏览 器 
的 测试 自动 化 。 

该 代码 库 最 初 被 称 为 “Selenium”， 也 就 是 后 来 的 “Selenium Core”， 于 2004 年 基于 
Apache 2 授权 发 布 。Selenium Core 也 是 后 来 出 现 的 Selenium Remote Control 和 Selenium IDE 
的 核心 技术 。 

因为 Selenium 当 时 使 用 JavaScript 编 写 ， 它 需要 开发 人 员 把 需要 测试 的 应 用 、 
Selenium Core 和 测试 脚本 部 署 到 同一 台 服 务 器 上 以 避免 违反 浏览 器 的 安全 规则 和 JavaScript 
沙 箱 策略 。 但 是 在 后 续 的 开发 过 程 中 ，Jason 发 现 并 不 是 总 能 满足 这 种 要 求 。 为 了 解决 这 
个 问题 ， 他 们 进一步 编写 了 一 个 HTTP 代 理 ， 这 样 测试 脚本 可 以 将 页 面 操作 指令 通过 HTTP 
请 求 发 送 到 代理 上 ， 连 接 协 议 则 基于 Selenium Core 的 语法 建 模 ， 称 之 为 “Selenese”。 这 套 
技术 实现 被 统称 为 “Selenium Remote Control”， 简 称 为 “Selenium RC” 或 “Selenium 1”。 
Selenium RC 的 诞生 是 划时代 的 ， 满 足 了 工程 师 用 多 种 编程 语言 开发 控制 脚本 的 需求 。 实 
际 上 任何 语言 只 要 支持 发 送 HTTP 请 求 就 可 以 支持 Selenium RC。 

但 另 一 方面 ，Selenium RC 也 有 明显 的 局 限 性 。 由 于 它 使 用 JavaScript 驱 动 页 面 ， 这 导 
致 其 无 法 突破 JavaScript 的 沙 箱 限制 ， 很 多 复杂 的 测试 场景 难以 实现 。 尽 管 Selenium RC 当 
时 已 经 取得 了 广大 社区 的 认可 ， 很 多 公司 都 投入 了 实施 ， 但 伴随 着 互联 网 相关 技术 的 不 
断 发 展 ， 这 一 局 限 变 得 日 益 突出 ， 例 如 Google 作 为 Selenium 的 重度 用 户 ， 却 总 被 限制 在 浏 
览 器 的 有 限 操控 范围 内 ， 无 法 有 效 充分 地 对 其 服务 进行 高 覆盖 率 的 测试 。2006 年 Google 工 
程 师 Simon Stewart 发 起 了 一 个 叫 WebDriver 的 项 目 。 此 项 目 通过 让 测试 引擎 直接 调用 浏览 
器 的 原生 API 来 绕 过 JavaScript 的 沙 箱 限制 ， 代 价 是 针对 不 同 的 浏览 器 需要 分 别 开 发 驱动 。 
Selenium WebDriver 于 2007 年 发 布 并 很 快 开 始 支持 正和 Firefox。 

尽管 WebDriver 取 得 了 很 大 的 成 功 ， 但 它 较 Selenium RC 也 有 明显 的 不 足 ， 就 是 RC 基 
于 HITP 代 理 的 架构 提供 了 广泛 的 编程 语言 支持 ， 而 WebDriver 仅 支持 Java。 为 了 充分 融 
合 两 者 的 优点 ， 并 吸纳 开源 社区 的 贡献 者 继续 合作 ， 这 两 个 项 目 于 2008 年 合并 ， 取 名 为 
Selenium 2。 

Selenium 2 既 向 下 兼容 Selenium RC 的 已 有 功能 ， 也 提供 了 更 现代 化 的 WebDriver API 来 
满足 更 复杂 的 测试 需求 。 对 于 新 项 目 框架 的 选 型 ， 推 荐 基于 WebDriver 来 搭建 自动 化 测试 
框架 。 
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9.2 Selenium 工 具 套 装 


随 着 技术 的 不 断 进 步 ， 当 前 的 Selenium 家 族 已 经 发 展 成 为 一 套 强 大 的 开源 测试 工 
具 ， 除 了 上 节 提 到 的 Selenium RC 和 Selenium WebDriver， 还 包括 Selenium IDE 和 Selenium 
Grid， 如 图 9-1 所 示 。 它 们 从 不 同方 面 满足 了 用 户 的 测试 需求 ， 让 Selenium 发 展 成 为 测试 领 
域 里 实 实在 在 的 “ 硒 ”。 接 下 来 ， 本 书 将 针对 这 些 工具 的 特点 逐一 展开 分 析 。 
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图 9-1 Selenium 工具 套装 


9.2.1 Selenium RC 


Selenium RC 的 核心 组 件 由 Selenium Core 和 Remote Control Server 构 成 ， 如 图 9-2 所 示 。 
Selenium Core 本 身 是 一 个 JavaScript 的 类 库 ， 包 含 了 操作 浏览 器 的 相应 代码 。 运 行 测试 用 例 
时 ， 测 试 代码 会 通过 封装 好 的 客户 端 API 将 浏览 器 操作 指令 通过 HTTP 请 求 发 送 到 Remote 
Control Server。Remote Control Server 接 收 到 HTTP 请 求 后 ， 根 据 指令 访问 被 测 页 面 获 取 对 
应 网 页 数据 ， 在 获取 的 网 页 数据 里 注入 Selenium Core 的 代码 ， 然 后 由 Selenium Core 根 据 测 
试 指令 操作 浏览 器 ， 进 行 页 面 操作 。 

在 这 个 流程 里 ，Remote Control Server 的 存在 不 仅仅 是 为 了 支持 多 种 客户 端 编程 语 
言 ， 更 关键 的 是 发 挥 了 一 个 HTTP 代 理 的 角色 。 大 家 知道 ， 现 在 主流 的 浏览 器 出 于 安全 考 
虑 ， 都 支持 JavaScript 的 同 源 策略 "9， 它 是 浏览 器 最 核心 也 是 最 基本 的 安全 功能 。 在 浏览 器 
里 ， 某 域名 下 的 JavaScript 语 句 无 法 获取 其 他 域名 下 的 数据 或 操作 其 他 域名 下 的 对 象 ， 所 
以 外 部 引用 的 代码 因为 域名 不 同 会 被 拒绝 执行 。 为 了 避免 作为 外 部 引用 的 Selenium Core 被 





个“Mozilla. CORS[OL]. [2016]. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access control CORS. 
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浏览 器 拒绝 执行 ，Remote Control Server 担 当 了 HTTP 代 理 的 角色 。 它 在 收 到 网 页 数据 后 注 
入 Selenium Core 并 重组 网 页 数据 ， 然 后 再 将 重组 的 数据 转发 给 浏览 器 。 这 样 ， 浏 览 器 无 法 
意识 到 Selenium Core 实 际 上 是 注入 的 外 部 代码 ， 从 而 成 功 绕 过 了 浏览 器 同 源 策略 的 限制 。 
不 得 不 说 这 的 确 是 一 个 非常 精妙 的 创新 。 


Windows, Linux, or Mac (as appropriate)... 
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图 9-2 ”Selenium RC 工作 原理 


9.2.2 Selenium WebDriver 


Selenium RC 通过 注入 Selenium Core， 使 用 相同 的 JavaScript 类 库 来 操作 浏览 器 ， 
此 无 法 兼顾 到 不 同 浏览 器 的 差异 性 ;同时 由 于 JavaScript 的 沙 箱 属性 ， 有 些 复 杂 功 能 难以 
实现 。WebDriver? 的 实现 原理 完全 不 同 ， 它 直接 利用 浏览 器 的 接口 进行 网 页 操作 ， 更 


个 simon Stewart Introducing WebDriver[OL]. 2009. https://opensource.googleblog.com/2009/05/introducing- 
webdriver.html. 
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接近 用 户 使 用 的 真实 场景 ， 更 简洁 的 面向 对 象 的 客户 端 接口 也 大 大 提高 了 脚本 的 编写 
效率 。 
读者 可 能 会 有 一 个 疑问 ， 既 然 如 此 ， 那 Remote Control Server 还 有 存在 的 必要 吗 ? 关 

于 这 个 问题 ， 请 读者 谨 记 以 下 几 点 ， 它 们 也 充分 体现 了 RC 与 WebDriver 的 合并 理念 : 

(1) 为 避免 歧义 ， 现 在 Remote Control Server 成 为 了 Selenium Server 功 能 的 一 部 分 。 

(2) Selenium Server 考 虑 到 兼容 性 ， 同 时 支持 Selenium RC 和 Selenium WebDriver。 

(3) Selenium WebDriver 测 试 程序 既 可 以 通过 Selenium Server 操 作 浏 览 器 ， 也 可 以 直 
接 调 用 浏览 器 来 驱动 。 


9.2.3 Selenium Grid 


在 第 1.3 节 关于 手工 测试 的 局 限 性 中 ， 提 到 过 针对 当前 多 样 化 的 操作 系统 和 浏览 器 ， 
为 了 保证 产品 的 高 质量 需求 ， 要 让 测试 覆盖 到 尽 可 能 多 的 环境 ，Selenium Grid 就 是 为 
满足 这 种 分 布 式 测试 需求 而 诞生 的 。 本 书 将 在 第 14 章 详细 介绍 Selenium Grid 的 配置 与 
使 用 。 


9.2.4 Selenium IDE 


2006 年 ， 日 本 工程 师 Shinya Kasatani 对 Selenium 产 生 了 浓厚 兴趣 ， 并 成 功 地 在 Firefox 
里 开发 了 一 个 具有 交互 式 界面 的 插件 ， 可 以 支持 脚本 的 录制 、 播 放 、 修 改 和 导出 等 功能 。 
后 来 ， 该 项 目 集成 到 了 Selenium 套 件 内 ， 演 变 为 Selenium IDE (Integrated Development 
Environment) ， 它 小 巧 简便 ， 容 易 上 手 ， 对 初次 接触 自动 化 测试 的 人 员 熟 悉 Selenium、 了 
解 脚本 编写 很 有 帮助 。 

1. 安装 Selenium IDE 

由 于 Selenium IDE 是 Firefox 的 一 个 插件 ， 可 以 从 Firefox 插 件 管理 器 里 直接 安装 获取 ， 
具体 步骤 如 下 : 

(1) 打开 Firefox 浏 览 器 ， 单 击 右 上 角 按钮 ， 再 单 击 “Add-ons” 按 钮 ， 如 图 9-3 
所 示 。 

(2) 在 插件 管理 器 中 搜索 Selenium IDE， 并 按 Most Users 排 序 ， 可 以 方便 地 找到 
Selenium IDE 插 件 ， 如 图 9-4 所 示 。 单 击 Add to Firefox 按 钮 即 可 完成 安装 并 重启 Firefox。 
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Selenium IDE is an integrated development environment for Selenium 
tests, Itis implemented as a Firefox extension, and allows you to record, 
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图 9-4 ”安装 Selenium IDE 


2. 脚本 录制 与 播放 
安装 完 Selenium IDE 后 ， 就 可 以 在 Firefox 的 工具 菜单 下 找到 IDE 的 启动 项 ， 如 图 9-5 


所 示 。 
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9-5 ”启动 Selenium IDE 


选择 Selenium IDE 菜 单项 会 弹出 Selenium 窗 口 ， 该 窗口 包含 录制 按钮 、 脚 本 显示 区 、 
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脚本 编辑 区 等 多 块 区 域 ， 如 图 9-6 所 示 。 
脚本 播放 芒 Selenium IDE 2.9.1 二 oO x 二 
CD Artions OQptions Help 被 测 网 址 
Bage URL 


bo es 
| Commang Torget Vetve 录制 按钮 
列 试 用 从 \、 | | 
列表 ] 











脚本 显示 区 
测试 结果 | 站 
和 | 过 脚本 编辑 区 


Fallures 


Log Reference Uk-Eement Rollup Info” Clear 


测试 日 志 
图 9-6 Selenium IDE 界面 


接 下 来 以 必 应 搜索 为 例 演示 如 何 进行 脚本 录制 、 添 加 验证 条 件 以 及 进行 脚本 回放 ， 具 
体 步骤 如 下 : 

(1) 打开 Firefox 浏 览 器 和 Selenium IDE。 录 制 按钮 默认 为 启动 状态 ， 即 表明 录制 已 经 
开始 。 

(2) 切换 到 Firefox， 在 浏览 器 地 址 栏 中 输入 https://www.bing.com/。 

(3) 必 应 首页 加 载 完成 后 ， 在 搜索 输入 框 中 输入 selenium， 单 击 搜索 按钮 。 

(4) 回 到 Selenium IDE 窗 口 ， 单 击 录制 按钮 ， 停 止 录制 ， 即 可 看 到 脚本 显示 区 已 经 
有 了 录制 好 的 脚本 命令 。 

(5) 在 脚本 播放 工具 条 中 单 击 播放 按钮 ， 回 放 刚 录制 好 的 脚本 ， 图 9-7 显 示 测 试 成 功 

(6) 上 一 步 使 用 回放 功能 ， 通 过 执行 脚本 重复 了 人 工 所 做 的 搜索 过 程 。 但 是 该 脚本 
只 是 操作 浏览 器 ， 还 没有 验证 结果 。 请 注意 搜索 完成 后 必 应 页 面 的 标题 显示 为 selenium 
Bing， 接 下 来 为 脚本 加 入 验证 逻辑 ， 以 检查 标题 是 否 正确 。 单 击 脚本 显示 区 的 空白 部 分 
后 ， 脚 本 编辑 区 变 为 可 编辑 状态 。 

(7) 在 Command 下 拉 框 选择 assertTitle， 在 Target 一 栏 输入 selenium - Bing。 再 次 回放 
脚本 ， 图 9-8 显 示 页 面 标题 为 验证 期 待 的 selenium-Bing。 
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俐 Untitled (untitled suite) - Selenium IDE 2.9.1* = 口 x 
File Edit Actions Options Help 

Base URL | https//www.bing.com/ >| 
CG sbpsi so @-@ 
Test Case Table Source 

Untitled* 











Command Target Value 
| open / 

a dlick id=sb_form_q 

| pe id=sb_form_q selenium 
clickAndWait id=sb_form_go 








Command ~ 
Target Select Find 

















Runs: 
Failures: 


Value 




















Log Reference Ul-Element Rollup Info” Clear 
[info] Test case passed 
[info] Test suite completed: 1 played, all passed! 

[info] Playing test case Untitled 

[info] Executing: lopen | / || 

[info] Executing: |click | id=sb form q|| 

[info] Executing: |type | id=sb_form_q | selenium | 

[info] Executing: |clickAndWait | id=sb_form_go | | 

[info] Test case passed 

[info] Playing test case Untitled _ bd 








图 9-7 ”完成 录制 并 通过 测试 





















































@ Untitled (untitled suite) - Selenium IDE 2.9.1* 0 x 
Eile Edit Actions Options Help 
Base URL https//www.bing.com/ “| 
ms Dp bs ll S| © 
Test Case Table Source 
Untitled 
[command Target Value 
selenium 
Select Find 

eg Neference UlElement | Rollup Ino ae 
“LMTOJ Test surre compiereg: 1 playeg, alr passegr pa 


[info] Playing test case Untitled 

[info] Executing: lopen | /11 

[info] Executing: |click | id=sb_form_q | | 

[info] Executing: |type | id=sb_form_q | selenium | 
[info] Executing: |clickAndWait | id=sb form_ go | | 
[info] Executing: |assertTitle | selenium - Bing | | 
[info] Test case passed 图 
[info] Test suite completed: 1 played, all passed! 





< 

















9-8 ”验证 页 面 标题 ， 脚 本 运行 成 功 
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(8) 在 Selenium IDE 里 把 Target 一 栏 改 为 selenium， 再 次 回放 脚本 ， 测 试 日 志 区 将 显 
示 出 现 错误 ， 如 图 9-9 所 示 。 错 误 的 原因 是 页 面 标题 不 匹配 。 


Log Reference Ul-Element Rollup Info"” Clear 
TmroJ Praying test case Unicrdea 

[info] Executing: lopen | /| 1 

[info] Executing: |click | id=sb_form_q | | 

[info] Executing: |type | id=sb_form_q | selenium | 

[info] Executing: |clickAndWait | id=sb_form_go | | 

[info] Executing: lassertTitle | selenium | | 

[error] Actual value 'selenium - Bing' did not match 'selenium” 

[info] Test case failed 

[info] Test suite completed: 1 played, 1 failed v 


图 9-9 日 志 显示 有 错误 

以 上 是 最 简单 的 脚本 录制 与 修改 实例 。Selenium IDE 基 于 Selenese 在 Command 下 拉 框 
提供 了 丰富 的 页 面 操作 和 验证 方法 ， 读 者 可 以 基于 此 实例 进一步 尝试 和 了 解 在 Selenium 
IDE 内 录制 和 修改 脚本 的 神奇 之 处 。 

3. 导出 脚本 

Selenium IDE 另 一 个 强大 的 功能 是 能 够 把 录制 好 的 脚本 导出 为 其 他 编程 语言 的 测试 代 
码 。 这 个 功能 极 大 地 拓展 了 Selenium IDE 的 实用 性 ， 使 不 同 背 景 的 测试 人 员 都 可 以 方便 地 
选择 自己 熟悉 的 编程 语言 来 进一步 研究 。 在 实践 过 程 中 ， 开 发 人 员 可 以 先 在 Selenium IDE 
中 进行 脚本 录制 和 修改 ， 通 过 实时 回放 调整 好 参数 后 再 将 其 导出 并 纳入 到 自己 的 自动 化 测 
试 系统 内 。 

从 Selenium 中 导出 脚本 非常 简单 ， 如 图 9-10 所 示 ， 只 需要 在 Selenium IDE 里 选择 File 菜 
单 ， 单 击 Export Test Case As 菜单 项 即 可 。Selenium IDE 支 持 导出 多 种 主流 编程 语言 和 测试 
框架 ， 在 本 例 中 ， 选 择 的 是 CWNUnit/WebDriver， 即 导出 基于 C# 语 言 ， 由 NUnit 单 元 测试 
框架 组 织 ， 使 用 Selenium WebDriver API 的 测试 代码 。 


@ Untitled (untitled suite) - Selenium IDE291* 


Bie| Edit Actions Qptions Help 
NewTestCase CN Wy 
Open. co | @ 
Save Test Case Chl+5 
Save Test Case As- | sa 
ExportTestCase As ， Cs/NUnit/WebDriver 


Recent Test Cases 》 Cs/NUnit/Remote Control 

Add Test Case 。 CiitD Java / JUnit 4/ WebDriver 
Properties Java / TestNG / WebDriver 

New Test Suite Java / JUnit 4 / WebDriver Backed 
Open Test Suite Java / JUnit 4 / Remote Control 
Save Test Suite Java / JUnit 3 / Remote Control 

Save Test Suite As Java / TestNG / Remote Control 
Export Test Suite As— ， Python 2/unittest/WebDriver 
Recent Test Suites 》 python 2/ unittest/ Remote Control 


close cil+W Ruby / RSpec / WebDriver 

TT Ruby/ Test:Unit/ WebDriver 
Ruby / RSpec / Remote Control 
Ruby / Test:Unit / Remote Control 
Penl 


图 9-10 ”导出 测试 脚本 
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以 下 为 导出 的 核心 测试 代码 : 
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尽管 Selenium IDE 功 能 强大 ， 易 于 上 手 ， 但 由 于 测试 人 员 无 法 控制 其 脚本 的 录制 罗 
辑 ， 因 此 对 于 复杂 或 者 AngularJS 的 页 面 ， 录 制 的 脚本 往往 难以 维护 。 故 Selenium IDE 主 
要 适合 让 测试 人 员 快速 上 手 以 及 进行 原型 方案 的 设计 。 下 一 章 将 用 纯 编 程 的 方式 构建 测试 
用 例 。 


第 10 竟 
Selenium WebDriveF 与 元 素 定 位 


A 


Selenium WebDriver 可 以 由 多 种 编程 语言 驱动 ， 其 中 ， 基 于 C# 和 NUnit、Java 和 TestNG 
的 测试 方案 已 经 非常 成 熟 并 被 广泛 使 用 。 
本 章 将 介绍 : 
搭建 集成 开发 环境 
NUnit 单 元 测试 框架 
编写 测试 用 例 
使 用 工厂 模式 创建 驱动 对 象 
定位 页 面 元 素 


10.1 搭建 集成 开发 环境 


以 下 为 使 用 微软 Visual Studio 搭 建 Selenium WebDriver 测 试 环境 的 步 又 : 

(1) 启动 Visual Studio 2015， 选 择 File 一 New 一 Project 命 令 。 

(2) 在 弹出 的 New Project 对 话 框 中 选择 Visual C# 模 板 ， 单 击 Unit Test Project 选 项 ， 
修改 项 目 名 称 为 WebDriverTest， 单 击 OK 按钮 ， 如 图 10-1 所 示 。 

(3) 在 Solution Explorer 里 右 击 WebDriverTest 项 目 ， 选 择 References 一 Manage NuGet 
Packages 命 令 。 

(4) .Net 平 台 提供 了 丰富 的 Selenium 客 户 端 类 库 ，Selenium.WebDriver 和 Selenium. 
Support 是 最 基本 也 是 最 常用 的 ， 其 中 前 者 提供 了 对 浏览 器 驱动 的 绑 定 ， 后 者 对 HIML 复 
杂 元 素 提 供 了 定位 帮助 类 。 如 图 10-2 所 示 ， 在 NuGet: WebDriverTest 的 Browse 页 面 里 搜索 
selenium 关 键 字 ， 安 装 Selenium .WebDriver 和 Selenium.Support。 
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New Project 1? x 
Recent NET Framework 452 ~ | Sort by.[ Name Ascending = Seareh saledempatestcutc 日 “有 亡 - 
cs 
ste ra Vacs pe Vomcs 
a ee A project that contains unittests 
a 图 uirest App oomarn unrest Andro visual Cs 
+ Windows 
wt 国 wr ron amamurest coss riatom) Vesual ce 
+ ce 
ee wet App Oomarn utest liog Veual Ge 
* Coud [81 unit fest App Android) Visual cs 
Cross-Platform 
RE ce 
Eensibility 滴 Unit Test App log) Visual cg 
pios 
Uightswteh 
Siverlight 
请 Web Periommance and Load Test Project Visual Ce 
Wer 
Workflow 
+ onine Chck here to go online and find templotes 
Name webomveriest 
a rere - 
sohor [CT 
Solution name [WebOrverest create directony for solution 


DD Add to source Control 








OK Cancel 














图 10-1 创建 测试 项 目 
| Nucet weborverrest + x WE 


Browse Installed Updates 


selenium x - © OD include prerelease 


Selenium.WebDriver Yum Committers 1.61M downloads 


NET bindings for the Sel ver API 





Selenium.Support by selenium Committers, 1.3M downloads V253.1 
Support classes for the .NET bindings of the selenium WebDriver API 





10-2 ”安装 Selenium 支 持 库 


(5) 在 NuGet: WebDriverTest 管 理 器 中 下 载 Chrome 驱 动 ， 如 图 10-3 所 示 。 关 于 如 何 
支持 其 他 浏览 器 ， 以 及 对 应 驱动 的 安装 ， 将 在 12.4 节 详细 介绍 。 
[NuGet: WebDriverTest + x | UnitTest1.cs 


Browse Installed Updates 











chromedriver x 口 【oo Include prerelease 














Selenium.WebDriver.ChromeDriver by jsakamoto, 297K downloads 
Selenium Google Chrome Driver (Win32) (does not make your source repository to fat.) 


图 10-3 ”添加 驱动 


(6) 打开 UnitTestl.cs 文 件 ， 添 加 以 下 代码 引用 后 ， 针 对 Chrome 进 行 WebDriver 开 发 
的 环境 配置 工作 即 完成 。 
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using OpenQA.Selenium; 


using OpenQA.Selenium.Chrome; 


10.2 NUnit 测试 框架 


任何 测试 都 需要 一 个 框架 组 织 测试 用 例 ， 自 动 化 测试 也 不 例外 。NUnit 是 目前 .Net 
平台 上 最 成 熟 、 使 用 最 广泛 的 测试 框架 ， 它 属于 xUnit 家 族 的 一 员 ， 最 初 由 Kent Beck、 
Erich Gamma 等 共同 开发 完成 。 在 作者 编写 此 书 时 ， 最 新 的 NUnit 版 本 为 3.4.1。 本 节 将 使 用 
NUnit 构 建 自动 化 测试 框架 。 

在 C# 工 程 内 使 用 NUnit， 同 样 可 以 通过 NuGet: WebDriverTest 添 加 项 目 引用 。 如 图 
10-4 所 示 ， 打 开 NuGet 浏 览 页 面 后 ， 搜 索 NUnit， 下 载 NUnit 类 库 和 NUnit3TestAdapter。 
NUnit3TestAdapter 是 一 个 Visual Studio 插 件 ， 提 供 了 在 Visual Studio 集 成 开发 环境 内 对 NUnit 
测试 用 例 进行 可 视 化 操作 的 功能 。 


Browse nstalled Updates 
NUnit x ~ © 口 Indude prerelease 
人 @ NUnit by charlie Poole 四 41 
NUnit is a unit-testing framework for all .Net languages with a strong TDD focus. 
@ NUnit3TestAdapter by NUnit software Ov341 
1) 


NUnit 3 adapter for running tests in Visual Studio. Works with NUnit 3x use the NUnit 2 adapter for 2.x tests 
图 10-4 安装 NUnit 


NUnit 提 供 了 多 个 属性 对 测试 用 例 进行 组 织 ， 如 表 10-1 所 示 。 
表 10-1 NUnit 属 性 











属性 名 称 描述 
TestFixture 把 某 个 类 指定 为 一 组 测试 用 例 的 集合 
Test 把 某 个 方法 指定 为 一 个 测试 用 例 


Setup 在 每 个 测试 用 例 执行 之 前 进行 测试 环境 初始 化 
TearDown 在 每 个 测试 用 例 执行 完成 后 进行 测试 环境 清除 
TestFixtureSetup 执行 耗 时 且 可 以 被 多 个 用 例 共享 的 初始 化 代码 
TestFixtureTearDown 执行 耗 时 且 可 以 被 多 个 用 例 共享 的 环境 清除 代码 
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NUnit 允 许 在 测试 执行 过 程 中 对 测试 状态 进行 断言 ， 辅 助 判断 测试 成 功 与 否 。 表 10-2 
是 常用 的 断言 列表 。 
表 10-2 ”NUnit 断 言 


























断言 名 称 描 述 
Assert.AreEqual 判断 两 个 对 象 是 否 相同 
Assert AreNotEqual 判断 两 个 对 象 是 否 不 同 
Assert .AreSame 判断 是 否 引用 了 相同 对 象 
Assert AreNotSame 判断 是 否 引用 了 不 同 对 象 
Assert.Contains 判断 一 个 对 象 是 否 属于 某 个 数组 
Assert.Greater 判断 是 否 大 于 
Assert.Less 判断 是 否 小 于 
Assert.IsTrue 判断 是 否 为 true 
Assert.IsNull 判断 是 否 为 mull 
Assert.IsEmpty 判断 一 个 字 串 或 数组 是 否 为 空 








在 UnitTestl.cs 文 件 里 添加 对 NUnit.Framework 命 名 空间 的 引用 ， 并 按 如 下 修改 代码 完 
成 对 测试 用 例 的 组 织 。 


namespace WebDriverTest 
{ 
[TestFixture] 
public class BingTest 
| 
[SetUp] 
public void SetUp() 
{ 
} 
[TearDown] 
public void TearDown () 
{ 
} 


[Test] 
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public void search () 


} 


10.3 ”编写 测试 用 例 


Selenium IDE 能 够 自动 跟踪 用 户 的 鼠标 事件 、 定 位 点 击 的 HTML 元 素 、 录 制 脚本 。 那 
么 当 脱 离 Selenium IDE 后 该 如 何 获得 类 似 的 功能 呢 ? 本 节 仍 以 必 应 搜索 为 例 ， 来 演示 如 何 
用 C# 编 写 相同 功能 的 测试 用 例 。 

首先 需要 对 页 面 元 素 进行 定位 ， 操 作 步 骤 如 下 : 

(1) 启动 Chrome， 在 地 址 栏 输入 http:/www.bing.com， 按 回 车 键 。 

(2) 按 F12 键 ， 启 动 Chrome 调 试 窗口 ， 单 击 左 侧 的 Select an element in the page to inspect 
it 按钮 后 ， 单 击 页 面 上 的 搜索 框 ， 此 时 可 以 看 到 搜索 框 的 id 为 sb_formm q， 如 图 10-5 所 示 。 


| 
_ 




























图 10.5 选择 搜索 框 
(3) 使 用 同样 的 方法 得 到 搜索 按钮 的 id 为 sb_form_go。 
(4) 修改 代码 ， 创 建 Chrome 驱 动 对 象 并 基于 已 得 到 的 id 值 对 搜索 框 和 搜索 按钮 进行 
定位 和 操作 。 修 改 后 的 代码 如 下 。 


[TestFixture] 


public class BingTest 
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private IWebDriver driver = null; 
[SetUp] 
public void SetUp() 
{ 
driver = new ChromeDriver(); // construct the ChromeDriver object 
} 
[TearDown] 
public void TearDown () 
{ 
driver.Quit (); 
} 
[Test] 
public void Search () 
{ 
// navigate to bing.com 
driver.Navigate() .GoToUrl ("http://www.bing.com"); 
// locate the search box by id, set "selenium" as search text 
driver.FindElement (By.Id("sb_form q")).SendKeys ("selenium"); 
// locate the search button and click 


driver.FindElement (By.Id("sb_form go")).click(); 


以 上 代码 展示 了 如 何 通过 ById， 基 于 元 素 id 定位 到 提交 按钮 。 
必 应 在 完成 搜索 后 ， 会 返回 若干 个 相关 的 搜索 结果 。 假 设 本 次 测试 用 例 是 检查 
Selenium 的 官方 网 站 是 否 在 首页 被 搜索 到 ， 是 否 还 可 以 用 id 进行 元 素 定位 呢 ? 
(1) 再 次 在 Chrome 中 通过 按 F12 键 选择 列表 中 的 Selenium 官 方 网 站 ， 如 图 10-6 所 示 。 
(2) 从 图 10-6 中 可 以 看 到 对 应 的 超 链接 元 素 并 没有 id 属性 ， 所 以 无 法 使 用 id 对 其 进 
行 定位 。 但 其 href 属 性 是 http://docs.seleniumhq.org， 能 够 唯一 地 识别 该 对 象 。 根 据 这 一 特 
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点 ， 可 以 使 用 XPath 对 超 链 接 元 素 对 象 进行 定位 ， 示 例 代码 如 下 。 关 于 XPath 的 使 用 ， 本 章 
后 续 会 进一步 介绍 。 


Selenium - Web Browser Automation 


Selenium WebDriver If you want to create robust, browser-based 
regression automation suites and tests; scale and distribute 
scripts across many environments 

docs seleniumhq org > 


- Dawnlnoad Selenium ImE 
1 | Hements Console Sources Network Timeline ”profiles Application Security Audits 
VelT class="6_ad"™ data-bn="6"5-¢/1I 
Veli class="b_algo” data-bm="7' 
vediv class="b_title" 
v<h2 








f= “http://docs.seleniumhq.org/ ID=SERP,5141.1 ~ /a 


/h2: 
<div class="b_suffix b_secondaryText nowrap”>.¢/div 
/div 


图 10-6 ”定位 搜索 结果 


public void Search1() 
{ 

driver.Navigate() .GoToUrl ("http://www.bing.com"); 

driver.FindElement (By.Id("sb form q")).SendKeys("selenium"); 

driver.FindElement (BY.Id("sb form go")).click(); 

System.Threading.Thread.Sleep (5000); 

Assert.IsNotNull(driver.FindElement (By.XPath("//al@href='http://docs.seleniumhgq. 
org/']1"))); 


请 注意 ， 以 上 代码 在 执行 断言 之 前 通过 调用 System.Threading.Thread.Sleep 等 待 了 5 
秒 ， 原 因 是 需要 确保 搜索 完成 而 且 结 果 已 经 返回 给 了 浏览 器 。 本 书 将 在 后 续 章 节 详 细 介 绍 
多 种 等 待 方式 并 比较 其 适用 性 。 

(3) 在 Visual Studio 的 主 菜单 ， 选 择 Test 一 Windows 一 Test Explorer 命 令 ， 即 可 以 看 到 
创建 好 的 Search 用 例 。 右 击 Search， 选 择 Run Selected Tests 后 运行 测试 用 例 。 图 10-7 显 示 出 
测试 已 通过 。 
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Test Explorer a 4 


% [Ez - S| search Pp- 


BE Streaming Video: Configure cg 
Run All | Run- ~ | Playlist: AIIT 


4 Passed Tests (1) 
©@ search 15 sec 


Search 
Source: UnitTest1.cs line 33 


加 Test Passed - Search 


Elapsed time: 15 sec 


图 10-7 ”运行 测试 用 例 


10.4 ”使 用 工厂 模式 创建 驱动 对 象 


在 上 一 节 示 例 代码 中 ， 浏 览 器 驱动 对 象 是 通过 调用 驱动 类 对 应 的 构造 函数 来 创建 的 
但 直接 在 测试 用 例 代 码 中 创建 浏览 器 驱动 对 象 需要 显 式 指定 驱动 器 类 型 ， 对 于 多 浏览 器 测 
试 灵活 性 不 够 。 如 果 在 实践 中 需要 让 相同 的 测试 用 例 在 多 种 浏览 器 里 进行 测试 ， 该 如 何 指 
定 浏览 器 类 型 呢 ? 难道 每 个 测试 用 例 都 用 不 同 浏览 器 驱动 重 写 一 遍 吗 ? 

针对 这 个 需求 ， 可 以 结合 配置 文件 和 工厂 模式 动态 指定 浏览 器 对 象 的 类 型 。 由 于 配置 
文件 不 会 被 编译 到 生成 的 模块 内 ， 因 此 当 临 时 添加 或 删除 浏览 器 测试 类 型 时 ， 无 需 重新 编 
译 项 目 。 

以 下 为 app.config 的 示例 代码 : 


<?xm] version="1.0" encoding="utf-8" ?> 
<configuration> 
<appSettings> 
<add key="homeaddress" value="http://www.bing.com"/> 


<add key="browser" value="Chrome"/> 
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以 下 为 通过 工厂 模式 创建 浏览 器 驱动 对 象 的 示例 代码 : 
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driver.Url = (string)appreader.GetValue ("homeaddress", typeof (string)); 


return driver; 


10.5 ”定位 页 面 元 素 


从 上 一 节 的 示例 可 以 看 到 ， 无 论 是 填写 表单 ， 单 击 按钮 ， 还 是 断言 元 素 是 否 存在 ， 一 
个 前 提 是 需要 先 对 HTML 页 面 里 的 元 素 进行 定位 ， 否 则 后 续 的 DOM 操 作 也 就 无 从 谈 起 。 
WebDriver 提 供 了 FindElement 和 FindElements 函 数 用 于 定位 一 个 或 多 个 页 面 元 素 。 

1. FindElement 

该 函数 的 功能 如 下 : 

@ 如 果 没有 找到 任何 符合 查找 条 件 的 元 素 ， 则 抛 出 NoSuchElementException 异 常 。 

@ 如 果 找 到 一 个 相符 元 素 ， 则 返回 对 应 的 ITWebElement 对 象 。 

@ 如 果 找 到 多 个 相符 元 素 ， 则 返回 第 一 个 IWebElement 对 象 。 

2. FindElements 

该 函数 的 功能 如 下 : 

@ 如 果 没 有 找到 任何 符合 查找 条 件 的 元 素 ， 则 返回 一 个 列表 ， 里 面 元 素 为 空 。 

@ 如 果 找 到 一 个 相符 元 素 ， 则 返回 包含 一 个 IWebElement 对 象 的 列表 。 

@ 如 果 找到 多 个 相符 元 素 ， 则 返回 包含 多 个 IWebElement 对 象 的 列表 。 

在 前 面 的 例子 里 已 经 党 试 了 使 用 id 和 XPath 进行 元 素 定位 ， 本 节 将 继续 对 Selenium 
WebDriver 提 供 的 定位 方法 和 最 佳 实践 做 详尽 解释 。 


10.5.1 基于 id 定位 


通过 id 进行 元 素 定位 是 执行 效率 最 高 的 识别 策略 ， 在 前 端 工程 师 设计 页 面 的 时 候 ， 建 
议 为 页 面 内 所 有 的 关键 元 素 都 加 上 id， 以 此 提高 核心 功能 的 可 测试 性 和 性 能 ， 有 效 降低 编 
写 自动 化 测试 脚本 的 难度 。 
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被 测 HTML 代 码 如 下 : 


<html> 
<body> 
<div> 
<input type="text" id="txt input" name="txt input"> 
<input type="button" id="btn submit" value="Submit"> 
</div> 
</body> 


</html> 


测试 代码 如 下 : 


IWebElement txt input = driver.FindElement (By.Id("txt input")); 
IWebElement btn submit = driver.FindElement (By.Id("btn submit")); 
txt input.SendKeys ("automation"); 

txt_input.getText ("automation"); 


btn submit.Click(); 


在 以 上 代码 中 ， 被 测 HTML 文 件 内 的 两 个 input 元 素 有 id 值 ， 可 以 通过 By.Id 指 明 使 
用 id 作为 定位 手段 ， 调 用 FindElement 后 获取 得 到 对 应 的 元 素 对 象 。SendKeys 和 Click 是 
IWebElement 的 常用 方法 ， 在 获得 了 元 素 对 象 后 ， 可 以 用 来 设置 对 象 文本 和 模拟 鼠标 单 击 
动作 。 尽 管 id 是 一 种 高 效 的 定位 手段 ， 但 某 些 页 面 存 在 元 素 没有 id、 有 重复 id， 或 者 id 由 开 
发 框架 随机 生成 的 情况 ，id 存 在 使 用 局 限 性 。 


10.5.2 基于 Name 定 位 


基于 Name 的 定位 也 是 常用 的 方式 ， 特 别 是 表单 里 的 控件 都 会 设置 Name， 其 值 在 提交 
表单 后 可 以 被 服务 器 获得 。 与 id 类 似 ， 基 于 Name 的 定位 也 有 较 好 的 测试 性 能 ， 但 如 果 页 
面 中 多 个 元 素 有 相同 的 Name， 则 需要 通过 FindElements 先 找到 所 有 符合 条 件 的 元 素 ， 然 后 
进一步 定位 。 

被 测 HTML 代 码 如 下 : 
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测试 代码 如 下 : 





10.5.3 基于 ClassName 定 位 


根据 class 属 性 ， 可 以 使 用 By.ClassName 定 位 页 面 元 素 。 由 于 相同 的 class 可 能 被 添加 到 
多 个 页 面 元 素 ， 因 此 该 方法 比较 适合 于 页 面 中 使 用 了 独特 class 属 性 的 元 素 。 
被 测 HTML 代 码 如 下 : 
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</header> 
</body> 


</html> 


测试 代码 如 下 : 


IWebElement txt header = driver.FindElement (By.ClassName ("entry-title")); 


10.5.4 基于 TagName 定 位 


通过 By.TagName 可 以 对 页 面 中 的 菜 种 对 象 进行 查找 。 由 于 一 个 页 面 中 具有 相同 
TagName 的 元 素 可 能 有 多 个 ， 这 种 定位 方式 比较 适合 的 场景 是 用 FindElements 查 找到 该 类 
的 所 有 对 象 后 ， 对 其 进行 计数 和 修改 等 操作 。 

被 测 HTML 代 码 如 下 : 


<html> 
<body> 
<div> 
<input type="text"> 
<input type="text"> 
<button>Click</button> 
</div> 
</body> 


</html> 
测试 代码 如 下 : 
ReadOonlyCollection<IWebElement> elements = driver.FindElements (By.TagName ("input")); 
10.5.5 基于 LinkText 定 位 


超 链接 是 构成 一 个 网 站 应 用 的 重要 元 素 ，WebDriver 专 门 提 供 了 By.LinkText 基 于 
超 链 接 的 显示 文字 查找 anchor 元 素 。 在 以 下 示例 中 ， 超 链接 的 文本 为 “Go - Microsoft 
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Development Network”， 把 其 作为 参数 传 给 ByLinkText 即 可 找到 对 应 的 IWebElement 对 和 象 。 
被 测 HTML 代 码 如 下 : 


<html> 
<body> 
<div> 
<a href="https://msdn.microsoft.com/en-us/default .aspx"> 
<strong> 
<i>Go</i> 
</strong> 
<i> 
<i>Microsoft</i> 
<i>Development</i> 
<i>Network</i> 
</i> 
</a> 
</div> 
</body> 


</html> 


测试 代码 如 下 : 


IWebElement element = driver.FindElement(By.LinkText("Go - Microsoft Development 


Network")); 


10.5.6 基于 PartialLinkText 定 位 








基于 LinkText 的 定位 手段 需要 完全 匹配 显示 的 文字 ， 对 于 某 些 动态 页 面 或 者 是 支持 多 
语言 的 网 站 ， 链 接 的 一 部 分 文字 可 能 是 稳定 的 ， 但 另 一 部 分 会 发 生变 化 ， 在 这 种 情况 下 
LinkText 无 法 精确 匹配 对 应 的 元 素 。 对 于 这 种 情况 ， 可 以 使 用 By.PartialLinkText 进 行 部 分 
文字 的 匹配 。 
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被 测 HTML 代 码 如 下 : 


<html> 
<body> 
<div> 
<a href="https://msdn.microsoft.com/en-us/default.aspx"> 
<strong> 
<i>Go</i> 
</strong> 
<i> 
<i>Microsoft</i> 
<i>Development</i> 
<i>Network</i> 
</i> 
</a> 
</div> 
</body> 


</html> 


测试 代码 如 下 : 


IWebElement element = driver.FindElement (By.PartialLinkText ("Development")); 


10.5.7 基于 CssSelector 定 位 


在 前 端 开 发 中 ，CSS 被 广泛 应 用 于 页 面 元 素 的 选择 以 及 风格 描述 方面 。WebDriver 可 
以 通过 By.CssSelector 以 CSS 选 择 器 的 语法 进行 元 素 查找 。WebDriver 与 CSS 3.0 标 准 兼容 ， 
支持 CSS 中 的 名 字 空 间 和 伪 类 ， 可 以 对 使 用 id 或 Name 无 法 定位 的 较 复杂 元 素 进行 定位 。 从 
最 佳 实践 的 经 验 来 看 ， 测 试 人 员 在 用 CSS 选 择 器 的 时 候 ， 可 以 充分 参考 开发 人 员 写 的 CSS 


文档 以 获得 更 好 的 匹配 效果 。 
由 于 CSS 选 择 器 对 页 面 结构 的 变化 比较 敏感 ， 比 较 适 合 相对 稳定 的 页 面 测 试 。 以 下 示 
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例 代码 通过 CSS 选 择 器 查找 到 了 div2 下 的 checkbox 对 象 。 
被 测 HTML 代码 如 下 : 


<html> 
<body> 
<div id="div1"> 
<input type="checkbox">Checkbox 1 
</div> 
<div id="div2"> 
<input type="checkbox">Checkbox 2 
</div> 
</body> 


</html> 


测试 代码 如 下 : 


IWebElement element = driver.FindElement(By.CssSelector("#div2 > input[type= 


'checkbox']")); 


10.5.8 基于 XPath 定位 


XPath? 全 称 是 XML Path Language， 是 在 XML 文档 内 查找 信息 的 语言 ， 可 以 在 整个 
文档 树 内 通过 元 素 和 属性 进行 导航 。XPath 于 1999 年 成 为 W3C 标 准 ， 被 设计 供 XSLT、 
XPointer 以 及 其 他 XML 解析 软件 使 用 ， 所 以 理解 XPath 对 XML 相关 的 高 级 应 用 也 很 有 帮 
助 。 因 为 HTML 是 基于 XML (XHTML) 的 实现 ，Selenium WebDriver 也 可 以 通过 XPath 表 
达 式 对 页 面 内 的 元 素 进行 定位 。XPath 作 为 一 个 强大 的 定位 利器 ， 大 大 拓展 了 id、Name 等 
其 他 定位 器 的 局 限 性 ， 提 供 了 丰富 而 灵活 的 导航 能 力 。 

XPath 使 用 路 径 表 达 式 来 选取 文档 中 的 节点 或 节点 集合 ， 这 些 路 径 表达 式 与 常规 的 文 
件 系统 表达 式 非常 相似 。 另 一 方面 ， 由 于 XPath 使 用 灵活 ， 相 同 的 节点 可 以 用 不 同 的 表达 
式 定位 ， 如 何 找到 一 个 健壮 的 表达 式 对 初学 者 有 一 定 的 学 习 难 度 。 本 节 将 基于 以 下 被 测 


© W3C. XML Path Language[OL]. [2016]. https://www.w3.org/TR/xpath/. 
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HTML 代码 演示 XPath 的 常用 方法 和 最 佳 实践 。 
被 测 HTML 代码 如 下 : 





1. XPath 辅助 工具 

XPath 对 于 初学 者 有 一 定 的 理解 难度 ， 建 议 首先 结合 XPath 辅助 工具 逐步 练习 上 手 。 本 
节 将 介绍 Firefox 的 两 个 XPath 插件 FirePath 和 WebDriver Element Locator。 由 于 它们 是 Firefox 
的 插件 ， 安 装 步骤 与 Selenium IDE 类 似 ， 本 书 不 再 獒 述 。 

FirePath 是 一 个 基于 FireBug 的 插件 ， 它 可 以 对 所 测 节点 提供 XPath 建议 ， 以 及 对 输入 
的 XPath 进行 可 视 化 验证 。 测 试 人 员 可 以 方便 地 通过 FirePath 演 练 XPath 语 法 ， 选 择 最 优 表 
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达 式 。 
示例 步骤 如 下 : 
(1) 启动 FireFox 浏 览 器 ， 访 问 被 测 网 页 。 
(2) 右 击 页 面 上 的 Click 按 钮 ， 选 择 Inspect in FirePath 选 项 。 
(3) 如 图 10-8 所 示 ， 在 展开 的 FirePath 标 签 页 中 ， 选 中 的 按钮 分 别 在 页 面 和 代码 区 内 
被 高 亮 显示 ， 同 时 FirePath 提 供 了 /*[@id=-'buttonl'] 作 为 建议 的 XPath 表达 式 。 


email | |phone | dlick e 
Goto Bing | 





可 车 《 >》 壮 console HTML Css script DOM Net Cookies Firepath ~ 
| Top Window ~ | Highlight ”XPath: ~ /人 "[@id='button11 


四 <document> 
目 <html> 

国 <head> 

四 <body> 

目 <div id="divi"> 
B <div id="div2"> 
BB <div id="div3"> 
<input id="inputl" type="text” value="email"/> 


i 二 i 1 区 3 


</div> 
</div> 
</div> 
国 <div> 
</body> 
</html> 
</document> 








图 10-8 ”FirePath 标 签 页 
(4) 单 击 XPath 编 辑 框 ， 把 其 修改 为 /*[@id-'inputl']， 如 图 10-9 所 示 。 按 Enter 键 ， 则 
id 为 “input1” 的 input 元 素 被 高 亮 选中 。 





更 嘻 《 》 江 console HTML css script DOM Net Cookies Firepath 
| Top window - Highlight ，xpath: - 允 
日 <document> 
<html> 
国 <head> 
目 <body> 
目 <div id="divi"> 
加 <div id=" yy 














ut1” ”Ya 





<input id="input2”type="text”Value=， 
<button id="button1">Click</button> 
</div> 


图 10-9 修改 XPath 
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WebDriver Element Locator 是 另 一 个 FireFox 插 件 ， 对 元 素 定 位 可 以 提供 多 个 XPath 表 达 
式 建议 ， 方 便 测试 人 员 选 择 合适 的 定位 方式 ， 建 议 与 FirePath 结 合 使 用 。 
示例 步骤 如 下 : 
(1) 启动 FireFox 浏 览 器 ， 访 问 被 测 网 页 。 
(2) 右 击 页 面 上 的 Click 按 钮 ， 选 择 XPaths… 菜 单项 ， 如 图 10-10 所 示 。 


| _ [Lael 


CC 


Save Page As... 
Save Page to Pocket 


View Background Image he Cookies| Frepeth ~ 


六 于 《 》 并 cons 
Top Window ~ Highlight Select All 
四 <document> View XPath 
View page Source 
View Page Info 
Inspect Element (OQ) 
Inspect in FirePath 
® Inspect Element with Firebug 

C# locators- 
Java locators... 
Python locators.. 
Ruby locators.. 
Xpaths.. 





》 
YY /button[@id=button1] 

WwW //button[contains(,'Click)] 

MP //button[contains(@id,'button1)] 


图 10-10 ”使 用 WebDriver Element Locator 
(3) WebDriver Element Locator 分 别 建议 了 3 种 方式 对 该 按钮 进行 定位 ， 选 择 任何 一 

种 ， 对 应 的 表达 式 即 可 被 复制 到 剪贴 板 内 。 

2. XPath 定位 技巧 

1) 通过 绝对 路 径 定位 

使 用 了 绝对 路 径 的 XPath 表达 式 从 最 外 层 的 HTML 节 点 开始 逐 层 根据 页 面 结 构 进行 查 
找 ， 每 层 节 点 直接 通过 /进行 分 割 。/ 代 表 从 当前 节点 查找 子 节点 。 绝 对 路 径 的 优点 是 效率 
高 ， 但 由 于 绝对 路 径 完整 反映 了 被 找 节点 与 根 节点 之 间 的 关系 ， 导 致 它 的 定位 路 径 非 常 脆 
弱 ， 任 何 文档 上 的 结构 变化 都 可 能 导致 其 失效 ， 在 测试 过 程 中 应 该 尽量 避免 使 用 绝对 路 径 
定位 元 素 。 以 下 代码 遍历 了 从 html 到 button 元 素 的 路 径 ， 通 过 绝对 路 径 进行 定位 。 






IWebElement element = driver.FindElement (By.XPath ("html/body/div[1] /div/div/button")); 
2) 通过 相对 路 径 定 位 


由 于 绝对 路 径 存在 明显 的 定位 不 稳定 性 ， 相 对 路 径 使 用 得 更 为 广泛 。 相 对 路 径 通过 符 
号 // 从 根 节点 或 当前 节点 寻找 匹配 的 子 节点 或 孙子 节点 ， 而 无 需 关 心中 间 的 具体 准确 路 径 。 
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以 下 代码 通过 相对 路 径 定 位 button 元 素 ， 无 需 指 定 中 间 的 div。 


IWebElement element = driver.FindElement (By.XPath("//button")); 


3) 通过 元 素 属性 定位 

被 测 网 页 内 的 元 素 通常 包含 各 种 属性 ， 把 相对 路 径 与 这 些 属性 结合 起 来 往往 可 以 唯一 
地 标识 一 个 元 素 ， 这 种 方法 被 广泛 应 用 在 Selenium 测 试 中 。 在 以 下 代码 中 ，* 代 表 任 何 类 
型 的 元 素 ，@id 表 明 匹 配 元 素 的 id。 


IWebElement element = driver.FindElement (By.XPath("//*[@id="'button1']")); 


如 果 将 表达 式 改 为 /button[@id=-'buttonl"] 可 以 获得 相同 的 效果 ， 表 明定 位 id 为 button1 
的 元 素 。 

4) 通过 文本 匹配 定位 

HTML 页 面 里 最 丰富 的 内 容 是 文本 ， 通 过 文本 匹配 对 应 的 元 素 是 Selenium 测 试 中 经 常 
使 用 的 匹配 方式 。 特 别 是 当 其 他 属性 无 法 唯一 匹配 一 个 元 素 的 时 候 ， 优 先 推荐 文本 匹配 。 
以 下 示例 代码 通过 textO 进 行文 本 的 精确 匹配 ， 从 而 定位 到 对 应 的 元 素 。 


IWebElement element = driver.FindElement (BY.XPath("//a[text() = 'Go to Bing']")) 


5) 通过 文本 模糊 匹配 定位 

针对 页 面 中 某 些 文本 存在 不 确定 性 的 情况 ， 推 荐 使 用 模糊 匹配 而 不 是 精确 匹配 ， 这 样 
可 以 避免 因为 部 分 文本 发 生变 化 而 导致 测试 失败 的 情况 。 在 以 下 示例 代码 中 ，contains 表 
示 只 需要 部 分 匹配 超 链接 的 地 址 即 可 定位 成 功 。 


IWebElement element = driver.FindElement (By.XPath("//a[lcontains (@href, 'bing')]")); 


6) 通过 多 条 件 匹 配 定 位 

XPath 不 仅 可 以 通过 一 个 条 件 定位 节点 ， 还 可 以 使 用 and 和 or 逻辑 操作 符 对 多 组 条 件 进 
行 合 并 定位 。 以 下 代码 通过 and 操 作 ， 匹 配 同 时 满足 value 为 email 和 type 为 text 的 元 素 ， 最 终 
符合 条 件 的 input 元 素 被 成 功 定位 ， 如 图 10-11 所 示 。 


IWebElement element = driver.FindElement(By.XPath("//*[@value='email' and type= 


"text']") ) 7 
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!email phone Glick 
Goto Bing | 











三 哇 《 > console HTML css script DOM Net Cookies FirePath™ 
| Top Window ~ Highlight XPath: ~ | //[@value='email and @type='text] 


BB <document> 
<html> 

国 <head> 

@ <body> 

回 <div id="divl"> 

回 <div id="di 

回 <div id 













<input id="input2" type="text" value= 
<button id="buttonl">Click</button> 
</div> 





ne"/> 


图 10-11 使 用 and 定 位 


以 下 示例 代码 通过 关键 字 or 进 行 定 位 ， 如 图 10-12 所 示 ，value 为 email 和 phone 的 两 个 元 
素 被 成 功 定位 。 基 于 or 关键 字 的 定位 大 多 会 找到 多 个 元 素 。 


var elements = driver.FindElements(BY.XPath("//*[evalue='email' or @value='phone']")); 





碍 时 《 》 汪 console HTML css script DOM Net Cookies Firepath ~ 
| Top Window » Highlight XPath: ~  //*[@value='‘email' or @value='phone] 


目 <document> 
目 <html> 
国 <head> 
目 <body> 
BB <div id="divi"> 
<div id="di 








<button id= 
/div> 





uttonl">Click</button> 





图 10-12 ”使 用 or 定位 


另外 ， 也 可 以 使 用 | 合并 多 个 XPath 表 达 式 。 如 图 10-13 所 示 ， 以 下 代码 同时 定位 到 了 匹 


配 的 input 元 素 和 a 元 素 。 这 种 方法 对 于 在 页 面 内 查找 没有 稳定 位 置 ， 也 没有 特别 关系 的 一 
批 元 素 很 有 帮助 。 


var elements = driver.FindElements (By.XPath("//*[@value='email' or value='phone'] | //a")) 
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更 嘻 《 》 江 console HTML css Script DOM Net Cookies Firepath 
| Top Window -| Highlight ， XPath: ~ | 人"[@value='email or @value='phone]|/a 


国 <document> 
加 <html> 
国 <head> 
目 <body> 
目 <div id=" 





v3"> 





<input type="t 


图 10-13 ”多 表达 式 合并 定位 
7) 通过 索引 定位 
页 面 经 常 有 使 用 多 个 同类 型 节点 表示 列表 的 情况 ， 这 些 元 素 有 完全 相同 的 属性 ， 无 法 
通过 id 或 ame 进行 区 别 。 针 对 这 样 的 情况 ， 可 以 通过 索引 根据 元 素 顺序 定位 。 以 下 示例 代 
码 先 找到 页 面 内 的 第 2 个 div， 然 后 依 序 找到 里 面 的 第 2 个 input。 


IWebElement element = driver.FindElement (By.XPath("//div[2]/div/input [2]")); 


8) 通过 相对 位 置 关 系 定位 
HTML 页 面 内 有 能 通过 id、name 定 位 的 元 素 ， 也 有 难以 定位 的 元 素 ， 通 过 容易 定位 的 
元 素 找 到 其 他 元 素 是 有 效 测试 的 必要 条 件 。XPath 提 供 了 丰富 的 基于 相对 位 置 定位 的 关键 
字 ， 常 用 的 如 表 10-3 所 示 。 
表 10-3 ”常用 XPath 相对 位 置 定位 关键 字 






































示例 说 明 
parent a Nt@iabutont parent:*/input A 继续 寻找 
ry 
descendant 人 全 的 | af@id-divlJdescendant:button 人 二 节点 里 找到 所 有 


第 11 章 
其 于 WebDriver 的 Protractor 


Protractor 是 基于 Selenium WebDriver 的 自动 化 测试 框架 ， 编 程 语言 为 JavaScript。 

Protractor 不 仅 具 有 所 有 WebDriver 的 优点 ， 对 AngularJS 应 用 的 测试 还 提供 了 原生 支持 。 
本 章 将 介绍 : 

WebDriver 的 JavaScript 绑 定 

搭建 Protractor 测 试 环境 

选择 JavaScript 测 试 框架 

定位 页 面 元 素 

异步 流程 控制 

页 面 交 互 

Protractor 的 等 待机 制 

测试 非 AngularJS 程 序 


11.1 WebDriver 的 JavaScript 绑 定 


正如 第 10 章 所 述 ，WebDriver 支 持 多 种 编程 语言 ， 例 如 C# 和 Java 等 。 作 为 Web 世 
界 的 主要 语言 ，JavaScript 也 理所当然 地 进入 了 WebDriver 的 支持 列表 ， 于 是 就 迎 来 了 
WebDriverJs?。 读 者 可 能 会 奇怪 ，C# 和 Java 作 为 Selenium 世 界 的 中 坚 力量 ， 已 经 非常 稳 


QO SeleniumHQ. WebDriverJs[OL]. [2016]. https://github.com/SeleniumHQ/selenium/wiki/ WebDriverJs. 
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定 ， 也 被 证 明 是 良好 高 效 的 Selenium 自 动 化 测试 语言 ， 为 什么 还 要 考虑 JavaScript 呢 ? 

(1) 正如 第 1 章 所 言 ， 目 前 的 前 端 开发 正在 加 速 转型 ，JavaScript 已 经 是 编程 语言 里 
特别 是 Web 开 发 中 越 来 越 重 要 的 一 份子 。 

(2) 当前 软件 开发 的 趋势 是 DevOps 一 体 化 ， 过 去 开发 测试 以 不 同 的 组 织 结构 分 开 进 
行 的 时 代 已 经 一 去 不 复 返 。 在 敏捷 开发 理论 的 指导 下 ， 技 术 人 员 的 职位 界限 将 进一步 模 
糊 ， 一 位 工程 师 往往 同时 承担 开发 、 测 试 、 集 成 和 运 维 的 工作 。 也 就 是 说 用 与 开发 相同 的 
语言 进行 自动 化 测试 已 经 成 为 了 DevOps 的 基石 之 一 。 

(3) 基于 Node.js 的 开发 技术 已 经 非常 成 熟 并 得 到 了 广泛 的 使 用 ， 这 意味 着 越 来 越 多 
掌握 了 JavaScript 的 技术 人 员 希 望 用 他 们 最 熟悉 的 JavaScript 编 程 语言 进行 自动 化 测试 的 开 
发 工作 。 


11.1.1 WebDriverJs 与 Protractor 


作为 WebDriver 大 家 庭 的 一 员 ，WebDriverJs 是 Selenium 官 方 对 JavaScript 绑 定 的 实现 。 
WebDriverJs 既 具有 与 C#、Java 等 其 他 WebDriver 编 程 语 言 一 致 的 功能 ， 又 兼顾 了 JavaScript 
台 ， 可 以 运行 在 Node.js 环 境内 。WebDriverJs 对 各 大 主流 浏览 器 都 有 着 良好 支持 ， 包 括 
Chrome、 Internet Explorer、Edge、Firefox、Opera、Safari 和 Phantom]S。 
为 了 使 用 WebDriverJs， 需 要 在 项 目 根 目录 执行 以 下 命令 安装 WebDriverJs: 


npm install selenium-webdriver 


安装 完 WebDriverJs 后 ， 编 写 以 下 JavaScript 代 码 ， 即 可 通过 Builder API 创 建 出 Chrome 
的 驱动 对 象 ， 并 打开 必 应 主页 。 


Var webdriver = require('selenuim-webdriver'); 

Var driver = new webdriver.Builder(). 
withCapabilities (webdriver.Capabilities.chrome()). 
build(); 


driver.get ('https://www.bing.com'); 


在 WebDriverJs 的 基础 上 ，Google 研 发 了 一 款 自动 化 测试 框架 ， 这 就 是 Protractor。 由 
于 它 底层 是 对 selenium-webdriver 的 封装 ， 所 以 拥有 所 有 WebDriver 的 优点 和 功能 ， 而 且 添 
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加 了 更 多 的 新 功能 。 为 了 提高 项 目 开 发 效率 与 代码 的 健壮 性 ，Protractor 选 择 了 TypeScript? 
作为 开发 语言 ， 它 是 JavaScript 的 一 个 超 集 ， 并 扩展 了 语言 特效 ， 包 括 实现 类 、 接 口 、 模 
块 、 类 型 检查 等 。 

不 要 将 Protractor 与 测试 框架 例如 Jasmine 等 混淆 。Protractor 是 对 selenium- 


Webdriver 的 封装 ， 并 不 是 一 个 独立 的 测试 工具 ， 它 需要 与 Jasmine 等 测试 框架 
结合 使 用 才能 实现 自动 化 测试 。 





11.1.2 ”Protractor 特 点 概述 


说 到 Protractor， 就 不 得 不 提 AngularJS。 在 Protractor 之 前 ， 对 AngularJS 的 页 面 进行 
自动 化 测试 是 有 相当 难度 的 。 我 们 知道 ，AngularJS 的 页 面 泻 染 是 通过 在 $digest 循 环 中 检 
查 并 更 新 数据 完成 的 ， 这 是 AngularJS 独 有 的 特点 。 遗 憾 的 是 ，WebDriverJs 并 不 是 专门 为 
AngularJS 研 发 的 ， 它 并 不 理解 这 个 循环 过 程 。 所 以 ， 如 果 直 接 使 用 WebDriver 对 AngularJS 
页 面 进行 测试 ， 需 要 大 量 的 显 式 等 待 代码 确保 $digest 循 环 结束 和 页 面 刷 新 完成 ， 这 样 的 代 
码 维护 难度 高 ， 可 读 性 差 。 

另 一 方面 ，AngularJS 是 一 个 可 以 对 HTML 进行 扩展 的 语言 ， 它 不 仅 提供 了 大 量 原生 的 
Directive， 更 让 开发 者 有 机 会 开发 自己 的 Directive。 这 些 都 是 宝贵 的 页 面 开发 知识 ， 对 自 
动 化 测试 的 定位 很 有 帮助 。 那 么 ， 在 当前 DevOps 的 指导 下 ， 如 何 让 技术 人 员 充 分 基于 开 
发 中 使 用 的 技术 在 自动 化 测试 中 写 出 健壮 的 测试 代码 呢 ? 

针对 以 上 需求 ，AngualrJS 的 开发 团队 早期 通过 Karma 和 ngScenario9 进 行 端 到 端的 自动 
化 测试 。ngScenario 提 供 了 一 套 类 似 于 Selenium 的 接口 来 驱动 浏览 器 ， 但 是 后 续 遇 到 了 越 
来 越 多 功能 上 的 局 限 性 ， 基 于 ngScenario 的 思路 ，AngularJS 团 队 决 定 主 要 用 Karma 来 驱动 
单元 测试 ， 而 基于 ngScenario 的 思路 另外 开发 了 Protractor 来 专门 进行 自动 化 测试 。 

以 下 是 Protractor 的 主要 特点 : 

@ 自动 执行 等 待 ， 无 需 专 门 的 代码 进行 页 面 同步 。 

@ 针对 AngularJS 提 供 专 有 元 素 定位 方式 。 

@ 同时 支持 AngularJS 和 非 AngularJS 的 应 用 。 

@ 使 用 相同 的 JavaScript 语 言 进行 开发 、 单 元 测试 和 自动 化 测试 。 


人 TypeScript TypeScript[OL]. [2016]. http://www.typescriptlang.org/. 
©@ Karma-ng-scenario. Karma-ng-scenario[OL]. [2016]. https://www.npmijs.com/package/karma-ng-scenario. 
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可 以 搭配 多 种 BDD 测 试 框架 ， 包 括 Jasmine、Mocha 和 Cucumber 等 。 
支持 多 种 浏览 器 ， 包 括 IE、Chrome、Safari、FireFox 和 PhantomJS 等 。 
使 用 方便 ， 对 于 已 经 在 用 Node.js 的 团队 非常 容易 上 手 。 
同时 支持 本 地 和 远程 测试 。 
配置 灵活 ， 方 便 持 续集 成 。 

Protractor 有 这 么 多 优点 ， 是 不 是 意味 着 自动 化 测试 一 定 要 首选 JavaScript 和 Protractor 
呢 ? 答案 是 否定 的 。Selenium WebDriver 是 一 个 百花 齐 放 的 开放 社区 ， 这 里 不 仅 有 最 成 熟 
的 C# 和 Java， 也 有 近 几 年 异军突起 的 Python， 不 同 的 语言 都 能 找到 自己 的 适用 范围 。 另 
外 ， 在 进行 框架 选 型 的 时 候 ， 也 要 综合 考虑 本 公司 的 技术 积累 ， 一 般 建 议 从 较 熟 悉 的 编程 
语言 入 手 。 


11.1.3 ”Protractor 的 兼容 性 


在 作者 编写 本 书 的 时 候 ，Protractor 最 新 的 版 本 是 Protractor 4， 它 与 Node.js 4.0 及 以 上 
版 本 兼容 。 如 果 必 须 使 用 Node.js 0.12， 则 需要 用 Protractor 2。 

Protractor 支 持 1.1.4 之 后 的 AngularJS 应 用 。 如 果 需 要 测试 版 本 更 早 的 AngularJS 应 用 ， 
可 以 考虑 WebDriverJS 或 者 ngScenario。 


11.2 搭建 Protractor 测 试 环境 


在 详细 介绍 Protractor 的 接口 和 配置 之 前 ， 为 了 帮助 读者 快速 入 门 ， 本 节 将 基于 一 
个 简单 的 例子 来 演示 如 何 搭建 Protractor 的 测试 环境 以 及 编写 第 一 个 Protractor 脚 本 。 由 于 
Protractor 是 基于 Node.js 的 ， 请 读者 在 进行 以 下 步骤 前 确保 Node.js 已 经 正确 安装 ， 具 体 步 
又 可 以 参考 本 书 第 2 章 。 


11.2.1 安装 Protractor 编 辑 器 扩展 


Protractor 自 动 化 测试 的 核心 工作 是 编写 测试 用 例 ， 也 就 是 编写 JavaScript 代 码 ， 所 以 
理论 上 任何 编辑 器 都 可 以 胜任 ， 读 者 在 实际 工作 中 可 以 根据 喜好 或 习惯 选择 自己 所 用 的 编 
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辑 器 。 本 书 所 有 的 Protractor 测 试用 例 都 使 用 Visual Studio Code 进 行 编辑 ， 由 于 它 对 Node. 
js 提供 了 原生 支持 ， 可 以 无 缝 支持 Protractor 的 编辑 和 调试 。 另 外 ， 读 者 也 可 以 在 Visual 
Studio Code 里 安装 Protractor 的 扩展 插件 ， 它 提供 了 丰富 的 Protractor 代 码 智能 提示 ， 可 提高 
脚本 的 开发 效率 。 其 具体 安装 步骤 如 下 : 

(1) 启动 Visual Studio Code， 单 击 Extensions 项 ， 如 图 11-1 所 示 。 


MY Extension: Protractor snippets - ToDolist - vbualsudio Code 
File Edit View Go Help 


jex htm todo-sp alcont, Ertenston: Protroctor Snippets % 









Protractor Snippets 


Budi lrawan | © 1578 0 | Lcense 


Protractor Snlppets 11 
Protractor Snippets for Javaseript(ESS) a 
Budi teawan natall 
Protractor Snippets for JavascriptfES5) and Typescript 


Visual studio Code Snippets for Protractor 


图 11-1 安装 Protractor 插 件 
(2) 在 搜索 框 键入 Protractor 后 找到 Protractor Snippets 项 ， 单 击 Install 按 钮 。 


11.2.2 准备 AngularJS 被 测 网 站 


首先 创建 本 地 文件 夹 ToDoList， 并 添加 被 测 页 面 的 相关 文件 index.html 和 todo.js。 两 者 
内 容 分 别 如 下 : 
index.html 


<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" href="todo.css"> 
</head> 
<body ng-app="todoApp"> 
<h2>Todo</h2> 
<div ng-controller="TodoListController as todoList"> 
<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span> 


[ <a href="" ng-click="todoList.archive()">archive</a> ] 
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启动 命令 控制 台 ， 执 行 命令 http-server 启 动 本 地 Web 服 务 器 (如 果 读 者 尚未 安装 http- 
server， 请 参考 4.7.2 节 的 安装 步骤 ) 。 被 测 页 面 可 以 通过 8080 端 口 进行 访问 ， 如 图 11-2 所 
示 。 这 是 一 个 Todo 列 表 应 用 ， 用 户 可 以 添加 新 的 任务 ， 或 者 标注 任务 为 完成 状态 。 


€ > 0 |0 my 





Todo 


1 of 2 remaining [ archive ] 





[add new todo here [aadj 





图 11-2 ”被 测 程序 
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11.2.3 全 局 安装 Protractor 与 浏览 器 驱动 


启动 命令 控制 台 ， 通 过 以 下 命令 把 Protractor 安 装 到 全 局 缓存 内 ， 这 会 让 Protractor 命 
令 行 接口 可 以 作用 到 全 局 。 





npm install -g protractor 





安装 完成 后 可 以 键入 以 下 命令 检查 安装 是 否 成 功 ， 成 功 的 话 会 返回 Protractor 当 前 的 
版 本 。 


protractor -version 


Protractor 既 可 以 通过 文件 配置 测试 条 件 ， 也 接受 参数 。 执 行 以 下 命令 可 以 得 到 所 有 参 
数 的 帮助 ， 如 图 11-3 所 示 。 


protractor -help 


protractor -help 
ju must either 





图 11-3 ”Protractor 命 令 行 参数 
全 局 安装 完 Protractor 后 ， 执 行 以 下 命令 ， 将 Chrome 等 浏览 器 驱动 下 载 到 全 局 目 
录 中 。 





webdriver-manager update 
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11.2.4 ”本 地 安装 Protractor 与 浏览 器 驱动 


在 命令 控制 台 依 次 执行 以 下 命令 ， 初 始 化 package.json 文 件 ， 将 Protractor 安 装 到 本 
地 ， 并 下 载 浏览 器 驱动 。 与 上 一 节 将 Protractor 安 装 到 全 局 不 同 ， 本 地 安装 只 会 作用 到 当前 
项 目 文件 夹 内 ， 多 用 于 构建 工具 的 集成 。 


npm init 
npm install protractor --save-dev 


node .\node modules\protractor\node modules\webdriver-manager update 


11.2.5 ”编写 测试 代码 


用 Visual Studio Code 创 建新 文件 todo-spec.js， 代 码 如 下 : 


describe('todo list', function() { 

it('should add a todo', function() { 
browser.get ('/'); 
element (by.model ('todoList.todoText')) .sendKeys('first script'); 
element (by.css(' [value="add"] ')).click(); 
Var todoList = element.all (by.repeater('todo in todoList.todos')); 
expect (todoList.count()).toEqual (3); 
expect (todoList.get (2) .getText ()) .toEqual('first script'); 
todoList.get (2) .element (by.css('input')).click(); 
var completedAmount = element.all(by.css('.done-true')); 
expect (completedAmount .count ()) .toEqual (2); 

Ds; 


Ds 


以 上 测试 用 例 依 旧 是 由 大 家 已 经 熟悉 的 Jasmine 单 元 测试 框架 来 组 织 ， 具 体 用 法 请 参 
考 第 4 章 。 
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11.2.6 ”编写 配置 文件 


在 ToDoList 文 件 夹 内 创建 配置 文件 local.confjs，Protractor 将 通过 该 配置 文件 决定 测试 
使 用 的 环境 ， 代 码 如 下 : 


exports.config = { 

directConnect: true, 

specs: ['todo-spec.js'], 
baseUrl: 'http://localhost:8080"', 


framework: 'jasmine2"' 


配置 说 明 : 

@ baseUrl 代 表 了 被 测 网 站 的 地 址 ，http://localhost:8080 表 示 将 要 测试 的 ToDoList 网 站 
被 启动 在 了 本 地 的 8080 端 口 。 如 果 读 者 想 直 接 对 AngularJS 的 官方 网 址 进行 测试 ， 
请 将 其 修改 为 https://angularjs.org/。 

@ directConnect 表 示 Protractor 直 接 操作 驱动 进行 浏览 器 操作 ， 默 认 使 用 Chrome 作 为 
测试 浏览 器 。 

@ specs 是 一 个 数组 ， 定 义 测试 用 例 的 范围 。 在 本 例 中 ， 只 有 一 个 测试 用 例 todo- 
Sspec.js。 

@ framework 指 定 使 用 什么 测试 框架 组 织 和 驱动 测试 用 例 。 本 例 使 用 的 是 Jasmine， 也 
是 Protractor 的 默认 测试 框架 。 


11.2.7 ”运行 测试 用 例 


启动 另 一 个 命令 控制 台 ， 并 设置 当前 路 径 为 ToDoList， 执 行 以 下 命令 运行 测试 脚本 。 
Chrome 是 Protractor 测 试 的 默认 浏览 器 ， 在 本 例 中 Chrome 将 被 Protractor 启 动 并 执行 测试 用 
例 。 如 图 11-4 所 示 ， 第 一 个 脚本 顺利 通过 测试 。 





protractor local.conf.js 
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gp 


图 11-4 ”运行 Protractor 
本 测试 用 例 todo-spec.js 使 用 到 了 browser 对 象 ， 这 是 Protractor 对 WebDriver 实 例 的 包 
装 ， 作 为 Protractor 的 核心 对 象 ， 可 以 通过 browser 对 象 实现 页 面 导航 以 及 页 面 信息 的 提取 。 
在 本 例 中 ， 还 可 以 看 到 bymodel 和 byrepeater 这 两 种 全 新 的 定位 方式 。 读 者 可 能 还 记得 
第 10 章 介绍 的 传统 的 8 种 定位 方式 中 并 没有 包含 这 两 种 ， 这 是 Protractor 为 AngularJS 专 门 带 
来 的 定位 方式 ， 本 书 将 在 11.4 节 中 做 详细 介绍 。 








11.2.8 调试 


Visual Studio Code 原 生 支 持 Node.js， 可 以 方便 地 调试 JavaScript、TypeScript 以 及 其 他 
用 于 生成 JavaScript 的 编程 语言 。 以 下 为 调试 Protractor 的 配置 步 又 。 
(1) 在 Visual Studio Code 左 侧 工具 栏 单 击 Debug 按 钮 ， 如 图 11-5 所 示 。 注 意 ， 当 前 显 
示 No Configurations， 表 示 当 前 还 没有 配置 文件 定义 调试 选项 。 


DA todo-specjs - ToDolist - Visual Studio Code 





File Edit View Go Help 
5 bb NocConfigurations 交口 


4 VARIABLES 


4 WATCH 





图 11-5 ”开始 配置 调试 环境 
(2) 单 击 “Configure or Fix 'launch.js'” 齿 轮 按钮 ， 如 图 11-6 所 示 。 


| 238 | Web 前 端 测试 与 集成 一 一 Jasmine/Selenium/Protractor/Jenkins 的 最 佳 实践 


A ToDoList - Visual Studio Code 
5ile Edit View Go Help 





DEBUG Pb No Configurations Vv 于 叫 


Em 
VARIABLES Configure or Fix ‘launch.json’ 





图 11-6 ”配置 调试 启动 项 
(3) 选择 Node.js 作 为 调试 环境 ， 如 图 11-7 所 示 。 
B 


Nodejs 
VSCode Extension Development 


图 11-7 选择 Nodejs 


(4) 配置 文件 launch.json 被 自动 创建 到 .vscode 文 件 夹 内 ， 该 文件 包含 了 用 于 调试 
Node.js 应 用 的 配置 项 。 找 到 name 为 Launch 的 配置 块 ， 修 改 代码 如 下 : 


"name": "Launch", 

"type": "node", 

"request": "launch", 

"program": "${workspaceRoot}/node modules/protractor/bin/protractor", 
"stopOnEntry": false, 

"args": ["${workspaceRoot}/local.conf.js"], 

"cwd": "${workspaceRoot}", 

"preLaunchTask": null, 

"runtimeExecutable": null, 

"runtimeArgs": [ 


”=nolazy” 


"NODE ENV": "development" 
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"externalConsole": false, 
"sourceMaps": false, 


"outDir": null 





其 中 ，program 字 段 表 示 用 protractor 驱 动 测试 ，args 字 段 表 示 把 local.confjs 作 为 参数 传 


给 protractor。 


launch.json 中 的 Launch 仅 仅 是 该 配置 项 的 名 字 ，launch.json 支 持 任意 名 字 


的 配置 项 ， 从 而 能 够 以 不 同 的 参数 配置 调试 了 。 





(5) 打开 todo-spec.js， 按 F9 键 设置 断 点 ， 如 图 11-8 所 示 。 单 击 DEBUG 按 钮 后 启动 
@todo-specjs - oDolist - Visual Shudio Code 


Fle Edit View Go Help 


peau 了 taunch "| 癌 回 launchjson rodo x 





describe( 'todo list', function() { 


4 VARIABLES 1 
2 日 it('should add a todo’, function() { 


browser.get("/"); 


® Breakpoint lement(by.model('todoList. todoText')).sen 
6 element(by.css('[value="add"]')).click(); 


图 8 var todoList = element.all(by.repeater('to 
9 expect(todoList. count()).toEqual(3); 


图 11-8 ”设置 断 点 
(6) 如 图 11-9 所 示 ，Visual Studio Code 在 断 点 处 会 自动 中 断 执 行 ， 可 以 在 VARIABLES 
和 WATCH 窗 口 观察 变量 的 值 。 


em 丰 闪 回 launchjson iodospeck 只 er 
4 ARIABLES 1 describe('todo list', function() { 
local 2 it("should add a todo', function() { 

completedAmount: undefined browser get( 1) 

this: Object 

将 @ 5 element(by.model('todoList.todoText')).sendKeys('first script’); 

todoList NSIS 5 element(by.css('[value="add"]')).click(); 

seript 7 

Global 8 var todolist = element.all(by.repeater('todo in todoList,todos')); 

9 expect(todoList. count()).toEqual(3); 
4 WArem 19 expect(todoList. get(2) .BetText()) .toEqual('first script'); 
todolist: ElementArrayFinder ge 
ra 12 todoList.get(2).element(by.css('input')).click(); 

pe 13 var completedAmount = element.all(by.css('.done-true')); 

browser_; Browser 14 expect (completedAnount .count()) .toEqual(2)3 

bclear: function () { _ } 15 Ds; 

bclick: function () { - } 15 二 


BetAttribute: function () { ~ } 


图 11-9 调试 


四 Wu Shuai. Debug protractor script in Visual Studio Code[OL]. 2016. https://blogs.msdn.microsoft.com/ 
wushuai/2016/08/24/debug-protractor-script-in-visual-studio-code/. 
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11.3 选择 JavaScript 测 试 框架 


正如 在 C# 测 试 脚本 中 通过 NUnit 组 织 测试 用 例 ，Protractor 同 样 需要 JavaScript 单 元 测试 
框架 的 支持 。Protractor 利 用 适配器 与 测试 框架 集成 ， 这 样 的 设计 保证 其 既 支 持 主流 的 BDD 
框架 例如 Jasmine、Mocha 等 ， 也 能 够 支持 其 他 测试 框架 ， 读 者 在 选 型 的 时 候 可 以 根据 本 公 
司 的 知识 储备 加 以 选择 。 

如 图 11-10 所 示 ， 由 于 Protractor 已 经 自 带 了 Jasmine 和 Mocha 的 适配器 ， 无 需 额 外 下 载 
即 可 直接 使 用 Jasmine 和 Mocha; 对 于 其 他 测试 框架 ， 读 者 可 以 到 开源 社区 下 载 或 者 自行 实 
现 适 配器 。 





Jasmine 


} 


Mocha kK 一 一 ”| Protractor kK 一 一 ” 适配器 


其 他 测试 框架 
































图 11-10 ”Protractor 测 试 框架 
Jasmine 和 Mocha 的 适配器 源码 可 以 从 protractor/built/framework/jasmine.js 和 protractor/ 
built/frameworks/mocha.js 处 获得 。 
Jasmine 2.x 是 Protractor 的 默认 测试 框架 ， 会 作为 Protractor 的 依赖 包 被 一 起 下 载 到 计算 
机 。 考 虑 到 本 书 单元 测试 篇 是 基于 Jasmine 构 建 ， 而 使 用 相同 的 单元 测试 框架 组 织 测试 用 
例 可 以 大 大 降低 开发 人 员 的 学 习 成 本 ， 因 此 本 书 所 有 Protractor 测 试用 例 均 将 基于 Jasmine 
来 组 织 。 


11.3.1 配置 JavaScript 测 试 框 架 


JavaScript 测 试 框架 往往 提供 了 多 种 配置 参数 用 于 控制 测试 行为 或 者 报表 格式 ， 那 么 
如 何在 Protractor 里 设置 这 些 参数 呢 ? 
以 Jasmine 为 例 ， 它 对 外 提供 了 配置 选项 ， 如 表 11-1 所 示 。 
表 11-1 Jasmine 配 置 参 数 




















名 称 类 型 描 述 
showColors [boolean 是 否 在 控制 台 终 端 打 印 颜 色 ， 默 认为 true 
| Pe i 单位 是 毫秒 ， 默 认为 30000 
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( 续 表 ) 


描 述 











rt 指定 Jasmine-Core 的 安装 路 径 ， 可 以 为 空 ， 默 认 指向 Jasmine-npm 内 的 
依赖 包 











可 以 在 Protractor 的 配置 文件 中 添加 jasmineNodeOpts， 配 置 Jasmine 相 关 的 选项 。 代 码 
如 下 : 


exports.config = { 
directConnect:true, 

specs: ['todo-spec.js'], 
baseUrl: 'http://localhost:8080°', 
framework: 'jasmine2', 
jasmineNodeOpts:{ 
defaultTimeoutInterval: 10000, 


showColor: false 


11.3.2 ”JavaScript 测 试 框架 的 适配器 


一 个 完整 的 测试 流程 包括 解析 传 入 到 Protractor CLI 的 参数 ， 基 于 配置 选择 测试 框架 ， 
驱动 测试 用 例 。 这 些 步骤 主要 由 以 下 组 件 完 成 〈 参 见 图 11-11) : 

@ 启动 器 : 解析 配置 文件 中 浏览 器 选项 和 测试 框架 选项 并 传递 给 驱动 器 。 

@ 驱动 器 : 根据 配置 选 型 选择 测试 框架 的 种 类 。 执 行 测试 用 例 并 触发 测试 用 例 启 动 
或 结束 的 事件 。 

@ 适配器 : 驱动 器 和 测试 框架 的 桥梁 ， 初 始 化 测试 框架 的 配置 选项 ， 添 加 测试 用 例 。 

@ 测试 框架 : 测试 用 例 的 实际 执行 者 。 不 同 的 测试 框架 需要 不 同 的 适配器 与 
Protractor 进 行 集成 。 
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Protractor 
启动 器 














vy 
驱动 器 








测试 框架 

















vy 
适配器 < 

















图 11-11 ”Protractor 测 试 组 件 
以 下 为 Jasmine 适 配器 的 部 分 源码 ， 供 读者 参考 : 
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11.4 定位 页 面 元 素 


Protractor 作 为 对 WebDriverJs 的 封装 ， 提 供 了 多 样 化 的 定位 策略 来 查找 页 面 元 素 ， 充 
分 利用 AngularJS 特 有 的 属性 ， 使 定位 更 实用 、 更 方便 。Protractor 通 过 提供 以 下 3 个 对 象 实 
现 对 浏览 器 的 操作 和 元 素 定位 : 

(1) browser: 代表 当前 浏览 器 的 一 个 实例 ， 是 一 个 对 WebDriver 的 包装 ， 主 要 用 于 
页 面 浏览 以 及 获得 页 面 信 息 。 

(2) by: 元 素 定位 策略 选择 器 ， 决 定 用 什么 方式 定位 元 素 。 

(3) element: 功能 函数 ， 结 合 by 实现 元 素 定位 并 返回 定位 到 的 元 素 。 

为 了 方便 编写 脚本 ， 以 上 3 个 对 象 在 Protractor 初 始 化 过 程 中 由 protractor\built\runner.js 
暴露 为 全 局 变量 ， 代 码 如 下 : 








global.browser = browser ; 
global.$ = browser .$; 

global.$$ = browser .$8; 
global.element = browser .element; 


global.by = global.By = ptor 1.protractor.By; 


功能 函数 element 接 受 一 个 定位 策略 Locator 对 象 作为 参数 ， 返 回 单个 ElementFinder 对 
象 。ElementFinder 可 以 理解 为 一 个 WebElement 的 包装 ， 通 过 它 可 以 实现 DOM 元 素 的 操 
作 。Locator 对 象 的 创建 通过 全 局 的 by 对 象 实现 。 还 记得 第 10 章 本 书 介绍 的 8 种 WebDriver 
原生 定位 方式 吗 ? 作为 WebDriver 的 包装 ，Protractor 仍 然 支持 这 8 种 定位 方式 ， 如 表 11-2 所 
示 。 从 表 11-2 中 可 以 看 到 element 接 受 了 by 指定 的 定位 策略 然后 返回 查找 到 的 元 素 对象 。 
表 11-2 ”Protractor 的 定位 方法 

















定位 方式 示 例 
Id element(by.id('dog_1d4")): 
Name element(byname(dog_name)): 
ClassName element(by.className('dog)): 
TagName element(by.tagName('a'")): 
LinkText element(by.link Text('Protractor’)): 





PaitialLink Text element(by.partialLink Text (Protractor)): 








CssSelector element(by.css('.pet .cat')); 
XPath element(by.xpath(//ul/li/a")); 
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如 果 开发 人 员 想 返回 多 个 元 素 ， 可 以 使 用 element.all 函 数 。 该 函数 接受 一 个 Locator 对 
象 并 返回 ElementArrayFinder 对 象 ， 可 以 理解 为 一 组 WebElement 的 集合 。 

除了 以 上 原生 的 定位 策略 ，Protractor 还 提供 了 新 的 定位 策略 ， 特 别 是 对 AngularJS 的 
特殊 属性 进行 了 优化 。 


11.4.1 基于 binding 定 位 


ng-bind 是 AngularJS 里 进行 数据 绑 定 的 方法 ， 基 于 by.binding，Protractor 可 以 通过 
HTMLI 页 面 内 使 用 的 绑 定 字符 串 定位 元 素 。bybinding 支 持 模糊 匹配 ， 通 过 部 分 字符 串 进行 
匹配 。 

被 测 HTML 代码 如 下 : 


<span>{ {person.name}}</span> 


<span ng-bind="person.email"></span> 


定位 代码 如 下 : 


element (by.binding ('person.name')); 
element (by.binding ('person.email')); 


element (by.binding ('name')); //partial match 
以 上 代码 中 ，element 和 by 就 是 暴露 在 global 对 象 上 的 变量 ， 它 们 也 都 可 以 通过 另 一 个 
全 局 变量 protractor 间 接 获 得 ， 例 如 : 


protractor.browser.element (protractor.by.binding('person.name')); 
protractor.browser.element (protractor.by.binding('person.email')); 


protractor.browser.element (protractor.by.binding('name')); 


出 于 代码 简洁 的 最 佳 实践 ， 推 荐 直接 使 用 element 和 by。 另 外 ，Protractor 也 提供 了 
by.exactBinding 进 行 精确 定位 ， 避 免 于 模糊 定位 返回 多 个 元 素 的 情况 ， 例 如 : 


element (by.exactBinding('person.name')); 


Protractor 新 添加 的 所 有 定位 方法 都 基于 WebDriver 实 现 ， 以 下 为 byexactBinding 的 源 
代码 。 
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exactBinding (bindingDescriptor: string): Locator { 
return { 
findElementsOverride: 
(driver: WebDriver, using: WebElement, rootSelector: string): 
wdpromise.Promise<WebElement[]> => { 
return driver.findElements (webdriver.By.js( 
clientSideScripts.findBindings, bindingDescriptor, true, using, 
rootSelector)); 
}, 
toString: (): string => { 


return "by.exactBinding("' + bindingDescriptor + '")'; 


如 果 读 者 有 兴趣 可 以 在 网 址 https://github.com/angular/protractor/blob/4.0.9/lib/locators.ts 
处 看 到 其 他 定位 方法 的 源 代码 。 


11.4.2 基于 model 定 位 


使 用 by.model 通 过 检查 ng-model 表 达 式 定位 元 素 。 
被 测 HTML 代 码 如 下 : 


<span ng-model="person.email"></span> 


定位 代码 如 下 : 
element (by.model ('person.name')); 
11.4.3 ”基于 options 定 位 


使 用 by.options 通 过 检查 ng-options 表 达 式 定位 元 素 。 
被 测 HTML 代 码 如 下 : 





第 11 章 ”基于 WebDriver 的 Protractor 测 试 框架 | 247 | 


<select ng-model="color" ng-options="c for c in colors"> 
<option value="0" selected="selected">red</option> 
<option value="1">green</option> 


</select> 


定位 代码 如 下 : 


element.all (by.options('c for c in colors')); 


11.4.4 基于 buttonText 定 位 
使 用 by.buttonText 通 过 按钮 文字 定位 元 素 。 
被 测 HTML 代 码 如 下 : 


<button>Save my file</button> 


定位 代码 如 下 : 


element (by.buttonText ('Save my file’')); 


同时 ，Protractor 提 供 了 by.partialButtonText 进 行 模糊 定位 ， 代 码 如 下 : 


element (by.partialButtonText ('Save')); 


11.4.5 基于 repeater 定 位 


ng-repeater 是 非常 实用 的 AngularJS 指 令 ， 广 泛 用 于 绑 定 列表 。 使 用 by.repeater 函 数 ， 
可 以 通过 ng-repeater 表 达 式 定位 元 素 。 
被 测 HTML 代码 如 下 : 


<div ng-repeat="cat in pets"> 
<span>{{cat.name}}</span> 
<span>{{cat.age}}</span> 


</div> 
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定位 代码 如 下 : 


// Returns the DIV for the second cat. 

var secondCat = element (by.repeater('cat in pets').row(1)); 

// Returns the SPAN for the first cat's name. 

var firstCatName = element (by.repeater('cat in pets'). 

row(0) .column('cat.name')); 

// Returns a promise that resolves to an array of WebElements from a column 


var ages = element.all (by.repeater('cat in pets').column('cat.age')); 


11.4.6 ”基于 js 定位 


Protractor 提 供 了 by.js 函 数 ， 可 以 利用 自 定义 JavaScript 代 码 对 被 测 页 面 元 素 进行 定位 。 
自 定义 JavaScript 代 码 作为 字符 串 或 者 回调 函数 传 入 byjs， 这 些 代码 的 执行 上 下 文 在 被 测 页 
面 内 ， 并 不 能 与 测试 代码 本 身 交 互 ， 即 无 法 引用 测试 代码 内 的 变量 。 使 用 byjs 函 数 的 示例 
代码 如 下 。 

被 测 HTML 代 码 如 下 : 





<span class="small">One</span> 
<span class="medium">Two</span> 


<span class="large">Three</span> 


定位 代码 如 下 : 


var wideElement = element (by.js (function() { 
var spans = document .querySelectorAll ('span'); 
for (var i = 0; i < spans.length; ++i) { 
if (spans[i].offsetWwidth > 100) { 


return spans[i]; 


nD)s; 


expect (wideElement .getText ()) .togqual ('Three'); 
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11.4.7 ” 链 式 调用 定位 操作 


对 于 复杂 的 页 面 ， 元 素 往往 不 能 一 次 性 定位 成 功 ， 需 要 逐 层 从 上 而 下 进行 查找 。 基 
于 element 和 element.all， 可 以 轻松 地 在 Protractor 里 实现 对 元 素 的 链 式 定位 。 这 个 功能 非常 实 
用 ， 可 避免 书写 大 量 元 余 的 代码 对 元 素 对 象 进行 迭代 比较 。 常 用 的 链 式 定位 如 表 11-3 所 示 。 
表 11-3 ”常用 的 链 式 定位 








定位 方式 说 明 
element(locator) 在 父 元 素 中 查找 一 个 子 元 素 
element(locator) 在 父 元 素 中 查找 一 组 元 素 





element.all(locator) 


在 一 组 元 素 中 查找 一 组 符合 条 件 的 元 素 
elementall(locator) 。 |fiter 。 | 接受 回调 函数 作为 参数 进行 第 选 ， 返 回 一 组 符合 条 件 的 元 素 


element.all(locator) leet | 基于 索引 值 返 回 某 个 元 素 


element.all(locator) 





element.all(locator) 


返回 一 组 元 素 中 的 最 后 一 个 元 素 











以 下 示例 中 ， 首 先 找到 所 有 class 为 parent 的 div 元 素 ， 然 后 筛选 class 为 foo 的 子 元 素 ， 之 
后 应 该 返回 la 和 2a。 
被 测 HTML 代 码 如 下 : 


<div id='idl' class="parent"> 
<ul> 
<1i class="foo">la</1i> 
<li class="baz">1b</1i> 
</ul> 
</div> 
<div id='id2' class="parent"> 
<ul> 
<li class="foo">2a</1i> 
<1i class="bar">2b</1i> 
</ul> 


</div> 
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定位 代码 如 下 : 


element.all (by.css('.parent')).all(by.css('.f00')); 


以 下 示例 通过 filter 在 所 有 的 列表 元 素 里 匹配 文字 。 
被 测 HTML 代 码 如 下 : 


<ul class="items"> 
<1Li class="one">First</1i> 
<li class="two">Second</1i> 
<li class="three">Third</1i> 


</ul> 


定位 代码 如 下 : 


element.all (by.css('.items 1i')).filter(function(elem, index) { 
return elem.getText() .then (function (text) { 
return text === "Third'7 
D):; 


}) .first(); 


11.4.8 ”使 用 $ 和 $$ 


在 前 端 应 用 中 ，$ 是 jQuery 的 一 个 别称 ， 可 以 通过 它 构造 一 个 jQuery 对 象 ， 是 广大 前 端 
工程 师 经 常 使 用 到 的 技巧 。Protractor 贴 心地 把 $S 和 $$ 引 进 到 了 全 局 变量 ， 让 测试 人 员 可 以 
使 用 与 jQuery 一 致 的 语法 结构 ， 基 于 CssSelector 进 行 一 个 或 一 组 对 象 的 定位 。 其 中 ，$ 用 于 
定位 一 个 元 素 ，$$ 则 用 于 定位 一 组 元 素 。 

被 测 HTML 代 码 如 下 : 








<div class="parent1"> 
<div class="child"> 
<div>{ {person.phone}}</div> 


</div> 


第 11 章 ”基于 WebDriver 的 Protractor 测 试 框架 | 251 | 


</div> 
<div class="parent2"> 
<div class="child"> 
<div>{ {person.phone}}</div> 
</div> 


</div> 


定位 代码 如 下 : 


$('.parent1').$('.child') .element (by.binding('person.phone')); 


以 上 定位 代码 的 效果 与 以 下 代码 相同 ， 但 更 简洁 明了 。 一 般 而 言 ， 链 式 定位 表达 式 通 
常 比较 长 ， 使 用 $ 和 $$ 可 以 有 效 提高 代码 的 可 读 性 。 


element (by.css('.parent1')) .element (by.css('.child')) .element (by.binding('person.phone')) 


以 下 为 8$ 的 示例 代码 ， 用 于 定位 一 组 li 元 素 : 





<div class="parent"> 
<ul> 
<1li class="one">First</1i> 
<li class="two">Second</1i> 
<li class="three">Third</1i> 
</ul> 


</div> 


定位 代码 如 下 : 
$('.parent') .$$("11'); 
11.4.9” 自 定义 定位 策略 


Protractor 的 强大 之 处 在 于 它 不 仅 提供 了 丰富 的 定位 策略 ， 还 允许 开发 人 员 创建 自己 的 
定位 策略 。 大 型 应 用 往往 基于 范式 规划 而 成 ， 遵 循 一 定 的 设计 思路 与 模式 ， 充 分 利用 这 些 
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特殊 性 ， 创 建 自 定义 的 定位 策略 往往 能 获得 事半功倍 的 效果 。 
被 测 HTML 代 码 如 下 : 


<button ng-click="doAddition()">Go!</button> 


添加 自 定义 定位 策略 如 下 : 


by.addLocator ('buttonTextSimple', 

function (buttonText， opt parentElement, opt rootSelector) { 
// This function will be serialized as a string and will execute in the 
// browser. The first argument is the text for the button. The second 
// argument is the parent element, if any. 
var using = opt parentElement || document, 

buttons = using.querySelectorAll('button'); 

// Return an array of buttons with the text. 
return Array.prototype.filter.call (buttons, function(button) { 

return button.textContent === buttonText; 
1D); 


]) 7 


定位 代码 如 下 : 


element (by.buttonTextSimple('Go!')); 


11.5 异步 流程 控制 


请 读者 回忆 一 下 第 10 章 C# 测 试 脚本 的 主要 代码 逻辑 : 
(1) 打开 必 应 网 页 。 

(2) 首先 找到 搜索 框 。 

(3) 设置 搜索 文字 。 

(4) 找到 搜索 按钮 。 
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(5) 提交 搜索 内 容 。 
这 种 调用 方式 是 同步 的 ， 也 就 是 说 在 执行 下 一 步 操作 之 前 ， 上 一 步 操作 必须 完成 。 实 
际 上 不 仅 C#， 包 括 Java 和 Python 都 是 用 的 以 下 这 种 同步 方式 进行 浏览 器 操作 的 。 


driver.Navigate() .GoToUrl ("http://www.bing.com"); 

// locate the search box by id, set "selenium" as search text 
driver.FindElement (By.Id("sb form q")).SendKeys("selenium"); 
// locate the search button and click 


driver.FindElement (By.Id("sb form go")).click(); 


与 同步 方式 不 同 ，JavaScript 使 用 了 异步 编程 模型 ， 这 种 编程 模型 基于 回调 函数 实现 
事件 驱动 ， 避 免 了 多 线程 模型 同步 的 诸多 复杂 性 ， 而 且 可 以 充分 利用 单 核 CPU， 达 到 不 错 
的 性 能 表现 。 但 是 如 果 具 体 的 业务 逻辑 比较 复杂 ， 就 会 出 现 大量 的 顽 套 回调 函数 ， 大 大 降 
低 代码 的 可 读 性 和 可 维护 性 ， 也 就 是 编程 中 的 金字 塔 厄 运 〈Pyramid Of Doom”) 。 尽 管 对 
这 些 回调 函 数 采取 分 别 命名 和 分 离 存 放 的 措施 可 以 在 形式 上 减少 嵌 套 代码 的 规模 ， 但 仍然 
不 能 有 效 降低 霸 套 的 层 数 ， 无 法 从 根本 上 解决 问题 8。 

为 了 从 根本 上 解决 异步 回调 的 金字 塔 问 题 ， 开 源 社区 最 早 提出 了 Promise 异 步 编程 模 
式 ， 它 是 对 回调 函数 的 抽象 ， 力 图 在 保留 原 有 异步 模型 优势 的 情况 下 解决 回调 函数 的 霸 套 
问题 。Promise 本 质 是 一 个 对 象 ， 用 来 传递 异步 操作 的 消息 ， 它 代表 一 个 异步 操作 的 执行 
结果 ， 这 个 任务 既 可 能 已 经 完成 ， 也 可 能 仍 在 进行 中 。 

Promise 对 象 有 3 种 状态 : Pending (进行 中 ) 、Fulfilled (已 完成 ) 和 Rejected (已 失 
败 )， 只 有 异步 操作 的 结果 可 以 决定 当前 是 哪 一 种 状态 ， 任 何其 他 操作 都 无 法 改变 这 个 状态 。 

Promise 模 式 的 核心 是 调用 then 方 法 ， 它 可 以 用 来 注册 当 promise 完 成 或 者 失败 时 调用 
的 回调 函数 。 通 过 在 then 的 函数 体内 返回 一 个 新 的 promise 对 象 ， 可 以 支持 异步 的 链 式 调 
用 ， 从 而 将 异步 操作 以 同步 操作 的 流程 表达 出 来 ， 避 免 了 层 层 嵌 套 的 回调 函数 。 





11.5.1 使 用 Promise 


在 Protractor 中 定位 某 个 元 素 后 ， 即 可 以 对 该 元 素 进行 多 种 操作 ， 例 如 sendKeys〈 键 入 


四 Devin Weaver The Pyramid of Doom: A javaScript Style Trap[OL]. 2012. http://web.archive.org/ 
web/20151209151711/http://tritarget.org/blog/2012/11/28/the-pyramid-of-doom-a-javascript-style-trap. 
@ MaxOgden. Callback Hell[OL]. [2016]. http://callbackhell.com/. 
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字符 ) 、click ( 单 击 ) 等 。 所 有 这 些 操作 都 基于 异步 执行 ， 因 为 底层 的 WebDriverJS 使 用 
了 Promise?。 注 意 ， 虽 然 WebDriverJs 的 Promise 实 现 了 基于 CommonJS 的 Promise/A® 提 议 ， 
但 并 不 完全 遵守 所 有 的 规则 。 
接 下 来 ， 仍 然 以 本 章 第 1 节 中 用 的 ToDoList 为 例 介绍 Protractor 处 理 底层 的 异步 处 理 机 

制 。 以 下 测试 代码 通过 对 then 的 调用 把 若干 个 执行 体 串联 起 来 ， 完 成 对 DOM 元 素 的 操作 以 
及 断言 ， 包 括 : 

(1) 打开 网 页 。 

(2) 通过 bymodel(todoListtodoText) 找 到 输入 框 。 

(3) 设置 输入 框 文本 为 “first script”。 

(4) 通过 by.css('[value="add"]') 找 到 按钮 。 

(5) 单 击 按钮 。 

(6) 通过 by.repeater('todo in todoList.todos') 找 到 列表 。 

(7) 使 用 expect(items.length).toEqual(3) 断 言 列表 子 元 素 个 数 为 3。 

(8) 获取 列表 第 2 个 子 元 素 文本 。 

(9) 使 用 expect(itemtext).toEqual('first script) 断 言 元 素 文本 为 “first script”。 


describe('todo list', function() { 
it('should add a todo', function() { 
browser.get ('/') 
.then (function () { 
return element (by.model ('todoList.todoText')); 
}) 
.then(function (val) { 
return val.sendKeys('first script'); 
}) 
.then(function () { 


return element (by.css(' [value="add"] ')); 


© SeleniumHQ. Understanding the Promise Manager[OL]. [2016]. https://github.com/SeleniumHQ/selenium/ 
wiki/ WebDriverJs#promises. 
人 @ Common]Ss. Promises/A[OL]. [2016]. http://wiki.commonjs.org/wiki/Promises/A. 
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以 上 代码 编写 时 一 切 都 很 顺利 ， 代 码 逻 辑 也 很 清晰 ， 但 遗憾 的 是 运行 时 却 产生 了 如 下 





该 错误 的 原因 是 虽然 WebDriverJs 操 作 虽然 已 经 时 序 化 ， 但 该 测试 用 例 用 的 是 Jasmine 
框架 。 在 实际 执行 中 ，Jasmine 已 经 结束 运行 但 WebDriverJs 的 异步 操作 还 没有 返回 ， 所 以 
没有 任何 断言 发 生 。 为 了 解决 这 个 问题 ， 可 以 用 第 4 章 介 绍 的 Jasmine 异 步 技巧 ， 确 保 在 断 
言 执行 之 前 不 要 退出 测试 用 例 ， 示 例 代码 如 下 : 
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} 
.then (function (val) { 
return val.sendKeys('first script'); 
} 
.then (function () { 
return element (by.css(' [value="add"] ')); 
} 
.then(function (val) { 
return val.click(); 
} 
.then(function () { 
element.all (by.repeater('todo in todoList.todos')) 
.then (function (items){ 
expect (items .length) .toEqual (3); 
items [2] .getText () 
.then (function (itemtext) { 
expect (itemtext) .toEqual ('first script'); 


done (); 


11.5.2 定制 的 ControlFlow 





上 一 节 中 介绍 的 Jasmine 异 步 技巧 结合 使 用 WebDriverJs 的 Promise 虽 然 解决 了 








最 佳 实践 








互 








调 函数 


的 顽 套 问题 ， 但 代码 量 仍然 不 小 。 仅 仅 是 查找 对 象 、 单 击 按钮 、 进 行 断言 就 用 了 三 十 多 行 








代码 ， 如 果 是 更 复杂 的 业务 逻辑 岂 不 是 刚 摆脱 回调 函数 又 要 被 then 语 句 所 包围 ? 


为 了 解决 该 问题 ，WebDriverJs 使 用 了 一 个 定制 化 的 Promise， 它 内 部 以 ControlFlow 为 
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核心 对 执行 的 异步 操作 进行 时 序 控制 ， 无 需 在 测试 代码 中 显 式 地 添加 then 语 句 ， 也 无 需 具 
体 考虑 把 一 系列 异步 操作 进行 串联 代码 实现 ， 即 可 实现 异步 操作 的 顺序 执行 。 从 而 ， 开 发 
人 员 能 够 把 主要 精力 放 在 具体 业务 逻辑 上 。 那 么 ControlFlow 是 如 何 做 到 顺序 控制 的 呢 ? 

ControlFlow 的 完整 模型 由 任务 和 任务 队列 组 成 。 任 务 是 ControlFlow 中 执行 的 最 小 单 
元 ， 每 个 任务 都 会 通过 ControlFlow 的 execute 函 数 进 行 时 序 安排 ，execute 返 回 的 对 象 正 是 
一 个 Promise 用 于 承载 执行 结果 ， 如 以 下 源 代码 所 示 。Protractor 脚 本 中 的 元 素 操作 正 是 以 
任务 的 形式 被 执行 。 若 干 个 任务 从 属于 某 个 任务 队列 ， 在 JavaScript 事 件 循环 的 轮转 中 得 
到 执行 。 


execute (fn, opt description) { 
if (isGenerator (fn)) { 
let original = fn; 
fn = () => consume (original); 
} 
if (!this.hold ) { 
var holdIntervalMs = 2147483647; // 2^31-1; max timer length for Node.js 
this.hold_ = setInterval (function() {}, holdIntervalMs); 
} 
Var task = new Task( 
this, fn, opt description || '<anonymous>', 
{name: 'Task', top: ControlFlow.prototype.execute}); 
var q = this.getActiveQueue (); 
q.enqueue (task); 
this .emit (ControlFlow.EventType.SCHEDULE TASK, task.description); 


return task.promise; 


在 execute 函 数 创建 完成 任务 后 ， 该 任务 会 被 压 入 当前 的 任务 列表 内 。 如 果 任 务 列表 不 
存在 ， 则 进行 创建 ， 如 以 下 源 代码 所 示 : 


getActiveQueue () { 


if (this.activeQueue ) { 
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return this.activeQueue ; 
} 
this.activeQueue = new TaskQueue (this); 
if (!this.taskQueues ) { 
this.taskQueues = new Set(); 
} 
this.taskQueues .add (this.activeQueue ); 
this.activeQueue_ 
.once('end', this.onQueueEnd , this) 
.once('error', this.onQueueError , this); 
asyncRun(() => this.activeQueue = null); 
this.activeQueue .start(); 


return this.activeQueue ; 


既然 元 素 操作 在 ControlFlow 中 以 任务 的 形式 被 执行 ， 那 随后 的 回调 函数 如 何 保证 能 够 
以 期 望 的 时 序 执行 呢 ? WebDriverJS 会 把 脚本 中 的 回调 部 分 转换 为 一 个 then 任 务 也 放 到 任务 
队列 中 ， 从 而 满足 按 序 执行 的 要 求 。 如 果 读 者 对 ControlFlow 的 完整 实现 感 兴趣 ， 可 以 参考 
网 址 https://github.com/SeleniumHQ/selenium/blob/master/javascript/node/selenium-webdriver/ 
lib/promise.js 中 的 源码 。 

注意 ，Protractor 的 定位 操作 返回 的 是 ElementFinder 或 ElementArrayFinder 对 象 。 虽 然 
它们 可 以 理解 为 对 WebElement 的 包装 ， 但 不 同 之 处 在 于 ElementFinder 对 象 不 会 立即 根据 指 
定 的 Locator 来 查找 到 页 面 上 的 元 素 ，ElementFinder 只 在 调用 了 元 素 对 象 的 操作 方法 时 ， 它 
才 会 真正 实施 查找 执行 操作 。 这 种 定位 延迟 绑 定 的 优点 是 声明 某 个 元 素 的 时 候 并 不 需要 该 
元 素 必须 存在 。 复 杂 的 页 面 一 般 元 素 很 多 ， 而 且 这 些 元 素 不 一 定 在 页 面 刚 加 载 的 时 候 就 全 
部 存在 ， 延 迟 绑 定 可 以 实现 在 统一 的 地 方 对 这 些 元 素 进行 声明 ， 这 对 设计 良好 的 测试 代码 
帮助 很 大 。 本 书 将 在 第 13 章 介绍 利用 这 一 优点 实现 页 面 对 象 模型 的 方法 。 

现在 ， 把 上 一 节 的 测试 代码 基于 ControlFlow 重 新 改写 如 下 。 可 以 发 现代 码 清晰 简单 了 
很 多 。 





describe('todo list', function() { 
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it('should add a todo', function() { 
browser.get('/'); 
element (by.model ('todoList.todoText')) .sendKeys('first script'); 
element (by.css(' [value="add"]')).click(); 
Var todoList = element.all (by.repeater('todo in todoList.todos')); 
expect (todoList.count()).toEqual (3); 
expect (todoList.get (2) .getText ()) .toEqual("first script'); 

Ds 


Ds; 


11.5.3 JavaScript 测试 框架 的 异步 适配器 


ControlFlow 实 现 了 通过 同步 代码 执行 异步 的 DOM 操 作 ， 但 Jasmine 本 身 并 不 理解 
WebDriverJS 的 ControlFlow， 那 么 如 何 保证 Jasmine 的 断言 也 能 够 被 按 序 执行 呢 ? 为 解决 该 
问题 ，Protractor 提 供 了 Jasmine 和 WebDriverJs 之 间 的 适配器 jasminewd2” (随同 Protractor 被 
默认 安装 ) ， 它 包含 以 下 功能 : 

(1) 把 Jasmine 原 生 的 函数 基于 ControlFlow 进 行 了 包装 ， 然 后 替换 了 原生 函数 。 当 
ControlFlow 的 所 有 任务 完成 前 ， 任 何 一 个 测试 用 例 都 会 保持 等 待 状态 而 不 会 退出 。 以 下 代 
码 是 部 分 被 重新 包装 的 Jasmine 函 数 。 


global.it = wrapInControlFlow (global.it, ‘it'); 

global.fit = wrapInControlFlow (global .fit, 'fit'); 

global .beforeEach = wrapInControlFlow (global .beforeEach, 'beforeEach'); 
global.afterEach = wrapInControlFlow(global.afterEach, ‘'afterEach'); 
global.beforeAll = wrapInControlFlow(global.beforeAll, "beforeRl1')7 


global.afterAll = wrapInControlFlow (global.afterAll, 'afterAll'); 


(2) Jasmine 的 expect 操 作 会 把 断言 作为 一 个 任务 压 入 ControlFlow 中 ， 从 而 保证 断言 
按 序 执行 。 
(3) 断言 执行 之 前 首先 获得 Promise 对 象 返回 的 结果 。 


@® Protractor Adaptions. Protractor[OL]. [2016]. http://www.protractortest.org/#/control-flow. 
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如 果 读 者 使 用 其 他 的 测试 框架 进行 Protractor 测 试 ， 请 注意 其 是 否 有 对 应 


的 异步 适配器 。 目 前 Jasmine、Mocha 和 Cucumber 都 有 各 自 的 适配器 实现 ， 如 
果 读 者 选择 的 测试 框架 还 没有 对 应 的 适配器 ， 则 需要 自行 编写 ， 或 者 基于 各 
个 测试 框架 自身 对 异步 操作 的 支持 编写 测试 代码 。 





11.6 ”页 面 交互 


Protractor 提 供 了 丰富 的 页 面 交 互 API， 绝 大 多 数 是 对 WebDriverJs 既 有 方法 的 包装 。 本 
节 将 列 出 经 常 使 用 的 部 分 。 


11.6.1 操作 浏览 器 


在 Protractor 中 可 以 通过 全 局 变量 browser 访 问 浏览 器 对 象 ， 类 型 为 ProtractorBrowser。 
因为 browser 是 一 个 对 WebDriver 对 象 的 包装 ， 也 可 以 先 通过 browser driver 获 得 WebDriver 对 
象 ， 然 后 直接 调用 WebDriverJs 提 供 的 方法 。 

如 以 下 源 代码 所 示 ，ProtractorBrowser 在 构造 函数 里 通过 以 下 代码 实现 了 WebDriverJs 
方法 的 重 定 向 ， 所 以 也 可 以 通过 browser 调 用 WebDriverJs 的 方法 ， 以 达到 精简 代码 的 目的 。 


Object.getOwnPropertyNames (webdriver.WebDriver.prototype) 

.forEach(function (method) { 

if (! this[method] && 
typeof webdriverInstance [method] == 'function') { 
if (methodsToSync.indexOf (method) !== -1) { 

ptorMixin( this, webdriverInstance, method, this.waitForAngular.bind( this)); 

] 
else { 


ptorMixin(_this，webdriverInstance，method); 
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以 下 为 常用 的 浏览 器 操作 函数 : 

® browserget 

该 函数 的 作用 是 令 浏览 器 打开 目标 页 面 ， 功 能 与 browser.driver.get 一 致 。 

® browserrefresh 

该 函数 的 作用 是 重新 加 载 当前 网 页 。 

® browser.actions 

该 函数 的 作用 是 建立 一 个 操作 序列 ， 所 有 操作 只 有 在 调用 了 perform 后 才 被 执行 。 示 
例 代码 如 下 : 





® browsertouchActions 


该 函数 的 作用 是 建立 一 个 触摸 操作 序列 ， 只 有 在 调用 了 perform 后 才 被 执行 。 示 例 代 
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码 如 下 : 


browser.touchActions(). 
tap (element1) . 
doubleTap (element2) . 


perform(); 


® browserexecuteScript 
该 函数 的 作用 是 在 当前 窗口 内 执行 一 段 JavaScript 代 码 ， 可 以 引用 当前 窗口 内 的 有 效 
变量 。 如 果 需 要 传递 参数 给 该 段 JavaScript 代 码 ， 可 使 用 arguments 对 象 。 示 例 代码 如 下 : 


Var el = element (by.id('header')); 
var tag = browser.executeScript ('return arguments[0] .tagName', el); 


expect (tag) .toEqual ('h1l'); 


® browsergetPageSource 

该 函数 的 作用 是 获得 当前 页 面 的 源码 。 

® browsergetCurrentUrl 

该 函数 的 作用 是 获得 当前 页 面 的 URL。 

® browser.getTitle 

该 函数 的 作用 是 获得 当前 页 面 的 标题 。 

® browser.takeScreenshot 

该 函数 的 作用 是 对 整个 页 面 或 当前 窗口 进行 截屏 ， 保 存 为 base64 编 码 的 PNG 格 式 。 
® browser.switchTo 


该 函数 的 作用 是 在 多 个 frame 或 窗口 之 间 切 换 焦点 。 示 例 代码 如 下 : 


browser.switchTo() .frame (element (by.tagName ('iframe')).getWebElement ()); 


® browsergetCapabilities 

该 函数 的 作用 是 获得 当前 的 浏览 器 配置 信息 。 

® browsergetAllWindowHandles 

该 函数 的 作用 是 获得 所 有 窗口 的 窗口 句柄 ， 返 回 值 可 供 browserswitchTo 使 用 。 
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11.6.2 ”操作 元 素 


以 下 为 常用 的 元 素 操作 函数 : 
® clement(locator).isPresent 


该 函数 的 作用 是 检查 元 素 是 否 在 页 面 上 存在 。 示 例 代码 如 下 : 


expect (element (by.binding('person.name')).isPresent ()) .toBe(true); 


® element(locator).click 


该 函数 的 作用 是 单 击 当前 元 素 。 示 例 代 码 如 下 : 


element (by.partialLinkText ('Doge')) .click(); 


® clement(locator).sendKeys 
该 函数 的 作用 是 在 当前 元 素 上 键入 文字 或 命令 。 
® clement(locator).getTagName 


该 函数 的 作用 是 获得 当前 元 素 的 tag 名 称 。 示 例 代码 如 下 


expect (element (by.binding('person.name')).getTagName ()) .toBe('span'); 


® element(locator).getAttribute 
该 函数 的 作用 是 获得 当前 元 素 的 属性 。 示 例 代 码 如 下 : 


<div id="foo" class="bar"></div> 
Var foo = element (by.id('fo0o')); 


expect (foo.getAttribute (class)) .toEqual('bar'); 


® element(locator).getText 

该 函数 的 作用 是 获得 当前 元 素 的 可 见 文字 ， 包 括 子 元 素 部 分 。 
® element(locator).getSize 

该 函数 的 作用 是 获得 当前 元 素 的 大 小 ， 以 像素 为 单位 。 

® element(locator).getLocation 

该 函数 的 作用 是 获得 当前 元 素 的 位 置 。 

® element(locator).IisEnabled 


该 函数 的 作用 是 判断 当前 元 素 是 否 是 启用 状态 。 
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® element(locator).submit 
该 函数 的 作用 是 提交 表单 ， 可 以 是 表单 内 的 元 素 或 者 是 表单 元 素 本 身 。 示 例 代码 





® element(locator).clear 


该 函数 的 作用 是 清除 当前 元 素 的 值 ， 只 对 input 和 textarea 元 素 有 效 。 示 例 代 码 如 下 : 





® element(locator).isDisplayed 
该 函数 的 作用 是 判断 当前 元 素 是 否 为 可 视 状态 。 示 例 代码 如 下 : 





® element(locator).takeScreenshot 
该 函数 的 作用 是 为 当前 元 素 截 屏 。 示 例 代 码 如 下 : 
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var foo = element (by.id('fo0')); 
foo.takeScreenshot () .then((png) => { 
writeScreenShot (png, 'foo.png'); 


]) 


11.7 Protractor 的 等 待机 制 


一 个 网 站 应 用 不 仅 有 静态 的 HTML 元 素 ， 也 有 根据 用 户 的 操作 动态 修改 的 页 面 显 
示 。 有 些 操 作 会 有 比较 明显 的 延 时 ， 例 如 有 时 前 端 Web 应 用 需要 先 从 远 端 的 服务 器 获取 数 
据 ， 然 后 再 把 数据 泻 染 到 页 面 上 。 这 种 情况 下 ，Protractor 在 查找 元 素 之 前 需要 等 待 足够 
的 时 间 来 确保 JavaScript 的 动作 已 经 完成 ， 否 则 查找 元 素 会 失败 。 根 据 应 用 场景 的 不 同 ， 
Protractor 提 供 了 不 同 的 等 待机 制 。 


11.7.1 waitForAngular 


AngularJS 有 自己 独特 的 ， 区 别 于 其 他 前 端 框架 的 Sdigest 循 环 机 制 ， 该 循环 结束 后 完成 
页 面 泻 染 。 为 了 充分 利用 这 个 机 制 ，Protractor 提 供 了 waitForAngular， 这 个 函数 的 作用 是 
等 待 当前 正在 执行 的 $digest、S$http 或 者 $timeout 完 成 。 在 Protractor 执 行 元 素 查找 之 前 会 先 
把 waitForAngular 作 为 任务 压 入 到 ControlFlow 中 ， 从 而 确保 所 有 的 网 络 、 演 染 以 及 异步 操 
作 完 成 后 再 查找 对 应 的 元 素 。 基 于 Protractor 的 AngularJS 测 试 使 开发 人 员 可 以 将 主要 精力 
集中 在 业务 逻辑 上 ， 而 不 用 编写 大 量 的 显 式 等 待 代码 去 确保 元 素 已 经 在 页 面 上 存在 。 

为 了 充分 发 挥 waitForAngular 的 作用 ， 建 议 开 发 AngularJS 应 用 的 时 候 ， 尽 量 使 用 
AngularJS 原 生 的 $http、Stimeout 等 服务 ， 而 不 要 用 JavaScript 的 相应 函数 。 





® Protractor 框 架 已 经 在 各 元 素 操作 内 部 调用 了 waitForAngular， 测 试 脚 本 里 


不 应 该 再 显 式 调用 该 函数 。 








某 些 AngularJS 应 用 可 能 出 于 业务 要 求 会 不 间断 地 调用 $http 访 问 远程 服务 ， 对 于 这 种 
应 用 的 测试 ， 需 要 禁止 waitForAngular， 和 否则 测试 代码 会 一 直 处 于 等 待 状态 无 法 继续 执 
行 。waitForAngular 可 以 通过 以 下 代码 禁用 ， 这 也 是 测试 非 AngularJS 应 用 的 必要 步骤 ， 但 
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开发 人 员 需 要 自己 添加 额外 的 等 待机 制 保证 测试 代码 的 正确 执行 。 


browser.ignoreSynchronization = true; 


11.7.2 使 用 sleep 


对 于 非 AngularJS 的 应 用 ， 当 需要 等 待 一 段 时 间 《〈 例 如 等 某 个 元 素 出 现在 页 面 上 ) 再 
执行 下 一 句 脚本 命令 时 ， 使 用 sleep 是 最 简便 的 方式 。 这 是 一 个 WebDriverJs 提 供 的 函数 ， 
参数 为 等 待 时 间 ， 单 位 是 毫秒 。 以 下 示例 代码 让 测试 脚本 等 待 5 秒 。 


browser.sleep(5000); 


虽然 browser.sleep 简 单 易 用 ， 但 缺点 也 很 明显 。 测 试 脚本 之 所 以 要 进行 等 待 ， 往 往 是 
需要 等 某 些 异步 调用 完成 或 元 素 状态 的 更 新 ， 在 不 同 的 网 络 环境 和 系统 配置 下 ， 这 个 时 间 
是 不 一 定 的 ， 甚 至 无 法 预料 的 。 为 了 保证 测试 在 绝 大 多 数 环境 下 可 以 顺利 进行 ， 测 试 人 员 
往往 会 根据 经 验 赋予 其 一 个 较 长 的 等 待 时 间 。 在 这 样 的 设计 下 ， 就 算 页 面 已 经 提前 完成 状 
态 更 新 ，sleep 仍 然 会 按照 指定 参数 继续 等 待 ， 这 样 的 测试 效率 很 低 ， 不 推荐 大 量 使 用 。 


11.7.3 ” 隐 式 等 待 


隐 式 等 待 是 一 个 全 局 配置 ， 设 置 了 隐 式 等 待 后 ， 接 下 来 的 每 次 元 素 定位 都 有 一 个 超时 
限制 。 在 达到 这 个 超时 限制 之 前 ， 如 果 WebDriver 没 有 在 页 面 中 找到 期 望 的 元 素 ， 则 会 基 
于 一 个 时 间 周 期 不 断 循环 检查 元 素 状态 。 如 果 在 超时 前 找到 了 期 望 的 元 素 ，WebDriver 会 
提前 退出 等 待 继续 执行 脚本 。 如 果 超 时 限制 到 了 却 仍然 找 不 到 期 望 的 元 素 ， 则 抛 出 找 不 到 
元 素 的 异常 。 以 下 示例 代码 设置 了 隐 式 等 待 时 间 为 5 秒 。 


browser.driver.manage() .timeouts() .implicitlyWait (5000); 


隐 式 等 待 默认 为 关闭 状态 ， 在 实际 脚本 开发 中 ， 可 能 需要 根据 脚本 执行 的 阶段 不 同 ， 
在 同一 个 测试 用 例 中 多 次 调用 implicittyWait 调 整 等 待 时 间 。 如 果 设 置 时 间 为 0， 则 关闭 隐 
式 等 待 。 由 于 隐 式 等 待 会 基于 一 个 时 间 周 期 循环 执行 元 素 查找 代码 ， 较 长 的 超时 限制 或 较 
慢 的 定位 方式 会 影响 测试 效率 ， 因 此 不 建议 设置 太 久 的 隐 式 等 待 时 间 。 
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11.7.4” 显 式 等 待 


显 式 等 待 是 一 种 使 用 很 广泛 的 等 待机 制 ， 它 能 够 指定 具体 需要 等 待 的 元 素 状态 以 及 所 
超时 时 间 。 如 果 某 个 页 面 操作 比较 耗 时 ， 则 使 用 太 长 的 隐 式 等 待 对 测试 效率 影响 较 大 。 针 
对 这 种 情况 ， 使 用 显 式 等 待 能 够 对 不 同 的 元 素 有 针对 性 地 进行 设置 ， 灵 活性 更 高 。 

显 式 等 待 通过 向 browser wait 传 入 等 待 条 件 得 以 实现 。 例 如 以 下 示例 代码 通过 自 定义 函 
数 urlChanged 来 判断 当前 的 Url 是 否 符合 期 望 的 http://www.bing.com， 如 果 5 秒 后 仍然 不 符合 
等 待 条 件 则 抛 出 异常 。 


var urlChanged = function() { 
return browser.getCurrentUrl().then (function(url) { 
return url === "http://www.bing.com'7 
Ds; 
}; 
browser.wait (urlChanged, 5000); 


button.click(); 


除了 使 用 自 定义 的 函数 进行 条 件 匹 配 ， 也 可 以 通过 全 局 变量 ExpectedConditions 获 得 
Protractor 内 置 的 匹配 条 件 。 以 下 示例 代码 在 单 击 按钮 之 前 执行 了 显 式 等 待 ， 保 证 在 单 击 按 
钮 之 前 ， 该 按钮 已 经 进入 了 可 单 击 状态 。 





Var button = $('#mybutton'); 
var isClickable = ExpectedConditions.elementToBeClickable (button); 
browser.wait (isClickable, 5000); //wait for the button to be clickable 


button.click(); 


其 他 常用 的 内 置 等 待 条 件 包括 : 


® alertIsPresent 
该 条 件 用 于 判断 是 否 出 现 期 望 的 警告 框 。 示 例 代码 如 下 : 


browser.wait (ExpectedConditions.alertIsPresent (), 5000); 


@ textToBePresentInElement 


该 条 件 用 于 判断 元 素 的 文本 内 是 否 包含 所 指定 的 字 串 。 示 例 代码 如 下 : 
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browser.wait (ExpectedConditions.textToBePresentInElement ($('#abc'), 'foo'), 5000); 


® titleContains 
该 条 件 用 于 判断 页 面 标题 是 否 包括 所 指定 的 字 串 ， 匹 配 模式 大 小 写 敏感 。 示 例 代码 
如 下 : 


browser.wait (ExpectedConditions.titleContains('foo'), 5000); 


@ urlContains 
该 条 件 用 于 判断 页 面 URL 内 是 否 包含 所 指定 的 字 串 ， 匹 配 模式 大 小 写 敏感 。 示 例 代码 
如 下 : 


browser.wait (ExpectedConditions.urlContains('fo0'), 5000); 


® presenceOf 
该 条 件 用 于 判断 期 望 所 指定 的 元 素 在 页 面 中 存在 ， 但 并 不 需要 为 可 见 状态 。 示 例 代码 
如 下 : 


browser.wait (ExpectedConditions.presenceOf ($ ('#abc')), 5000); 


® stalenessOf 
该 条 件 用 于 判断 期 望 所 指定 的 元 素 在 页 面 中 不 存在 ， 与 presenceOf 的 作用 相反 。 示 例 
代码 如 下 : 


browser.wait (ExpectedConditions.stalenessOf ($('#abc')), 5000); 

® visibilityOf 

该 条 件 用 于 判断 期 望 所 指定 的 元 素 属于 可 见 状态 ， 意 味 着 该 元 素 有 非 0 的 高 宽 。 示 例 
代码 如 下 : 


browser.wait (ExpectedConditions.visibilityOof ($('#abc')), 5000); 

® invisibilityOf 

该 条 件 用 于 判断 期 望 所 指定 的 元 素 属于 不 可 见 状态 ， 与 visibilityOf 作 用 相反 。 示 例 代 
码 如 下 : 


browser.wait (ExpectedConditions.invisibilityOf ($('#abc')), 5000); 
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® clementToBeSelected 


该 条 件 用 于 判断 所 指定 的 选择 框 元 素 为 选中 状态 。 示 例 代码 如 下 : 


browser.wait (ExpectedConditions.elementToBeSelected($ ('#myCheckbox')), 5000); 


ExpectedConditions 支 持 匹配 条 件 的 布尔 运算 包括 not、and 和 or。 例 如 以 下 代码 表示 页 
面 标题 包含 Foo， 同 时 不 能 为 FooBar。 


var titleContainsFoo = ExpectedConditions.titleContains('Foo'); 
var titleIsNotFooBar = ExpectedConditions.not (EC.titleIs('FooBar')); 


browser.wait (ExpectedConditions.and(titleContainsFoo, titleIlsNotFooBar), 5000); 


11.8 测试 非 AngularJS 程 序 


Protractor 同 时 支持 测试 AngularJS 和 非 AngularJS 应 用 ， 但 编写 非 AngularJS 测 试 脚 本 
时 ， 测 试 人 员 需 要 使 用 到 上 一 节 提 到 的 隐 式 等 待 或 显 式 等 待 ， 从 而 保证 脚本 的 执行 时 序 。 
本 节 以 一 个 实例 演示 测试 非 AngularJS 程 序 需要 注意 的 地 方 。 

(1) 创建 本 地 文件 夹 NonAngular， 并 添加 以 下 被 测 index.html 文 件 。 


<!DOCTYPE html> 
<html] lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>NonAngularJSs</title> 
</head> 
<body> 
<input type="button" id="mybutton" onclick="onClick()" value="Click Me"></input> 
<script> 
function onClick(){ 


setTimeout (onTimeoutShort, 500); 
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setTimeout (onTimeoutLong, 3000); 


}; 


function onTimeoutShort (){ 


Var shortdiv = document.createElement ('div'); 


shortdiv.id = 'shortdiv'; 


shortdiv.innerHTML = 'Implicit Wait'; 


document .body.appendChild (shortdiv); 


Ps 


function onTimeoutLong(){ 


Var longdiv = document.createElement ('div'); 


longdiv.id = 'longdiv'; 


longdiv.innerHTML 


= "Explicit Wait'; 


document .body.appendChild(longdiv); 


} 
</script> 
</body> 


</html> 


(2) 启动 命令 控制 台 ， 执 行 命令 http-server， 通 过 浏览 器 访问 http://localhost:8080， 确 


保 可 以 成 功 访问 。 


(3) 启动 另 一 个 命令 控制 台 ， 执 行 以 下 命令 : 


npm install -g protractor 


npm init 


npm install protractor --save-dev 


node .\node modules\protractor\node modules\webdriver-manager update 





(4) 在 页 面 上 单 击 Click Me 按钮 会 触发 两 个 延 时 操作 ， 分 别 是 1 秒 和 3 秒 。 第 1 个 延 时 














操作 会 在 按钮 单 击 1 秒 后 为 页 歼 














添加 一 个 id 为 shortdiv 的 对 象 ， 文 本 为 Implicit Wait， 第 2 个 


延 时 操作 会 在 按钮 单 击 3 秒 后 为 页 面 添加 一 个 id 为 longdiv 的 对 象 ， 文 本 为 Explicit Wait。 
(5) 编写 以 下 测试 代码 模拟 单 击 按钮 行为 ， 并 验证 这 两 个 延 时 操作 是 否 工作 正常 。 
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local.conf.js: 


exports.config = { 


directConnect:true, 


specs: ['index.spec.js'], 
baseUrl: 'http://localhost:8080°', 
framework: "jasmine2" 


] 


index.sepc.js: 


describe('NonAngular Test', function() { 
it('should wait for timer', function() { 
browser.get ('/'); 


$('#mybutton') .click()7 
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expect ($('#shortdiv') .getText ()) .toBe('Implicit Wait'); 


expect ($('#longdiv') .getText ()) .toBe('Explicit Wait'); 


Ds; 


]) 7 


(6) 启动 另 一 个 命令 控制 台 ， 执 行 命令 protractor local.conf.js， 返 回 错误 信息 

“Angular could not be found on the page http://localhost:8080/ : retries looking for angular 

exceeded”。 其 原因 是 Protractor 默 认 设置 为 测试 AngularJS 应 用 ， 否 则 会 超时 退出 。 为 了 让 
Protractor 测 试 非 AngularJS 应 用 ， 需 在 加 载 页 面前 进行 如 下 设置 : 





browser.ignoreSynchronization = true 


(7) 再 次 运行 测试 代码 ， 以 上 错误 消失 ， 但 测试 用 例会 返回 新 的 错误 信息 “No 
element found using locator: By(css selector #shortdiv)”， 原 因 是 shortdiv 会 在 1 秒 延 时 后 才 被 
添加 到 页 面 中 ， 但 测试 代码 立即 进行 了 断言 而 并 没有 等 足 1 秒 ， 这 时 候 shortdiv 还 不 存在 。 

(8) 为 测试 代码 添加 隐 式 等 待 如 下 ， 在 定位 shortdiv 前 隐 式 等 待 1 秒 ， 从 而 确保 


shortdiv 可 以 被 成 功 定位 。 


describe ('NonAngular Test', function() { 
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(9) 除了 shortdiv，longdiv 会 在 3 秒 后 才 会 被 添加 到 页 面 中 ， 但 3 秒 时 间 较 长 不 适合 使 
用 隐 式 等 待 。 这 种 情况 下 ， 可 以 使 用 显 式 等 待 实时 检查 longdiv 的 状态 ， 修 改 后 的 最 终 测 试 
代码 如 下 : 





| 


有 第 12 章 
使 用 Selenium Server 


如 第 11 章 示例 代码 所 示 ，Protractor 对 Chrome 提 供 了 本 地 直 连 的 功能 ， 使 开发 人 员 在 
脚本 编写 和 本 地 调试 阶段 有 非常 便捷 的 开发 体验 。 但 另 一 方面 ， 一 个 功能 完善 的 自动 化 测 
试 框架 还 需要 能 够 覆盖 包括 Firefox、IE 和 Edge 等 在 内 的 其 他 多 种 浏览 器 。 这 些 浏 览 器 版 本 
众多 ， 运 行 在 不 同 的 操作 系统 上 也 可 能 产生 不 同 的 测试 结果 。 本 章 将 重点 介绍 用 Protractor 
实现 多 浏览 器 测试 的 技术 细节 ， 这 也 是 下 一 章 分 布 式 测试 的 基础 。 

本 章 将 介绍 : 

@ Selenium Server 环 境 配置 

® JSON Wire Protocol 与 W3C WebDriver 标 准 
® Selenium 3.0 
全 


配置 浏览 器 


12.1 Selenium Server 环 境 配置 


第 11 章 的 配置 示例 展示 了 Protractor 通 过 指定 directConnect 来 实现 对 Chrome 浏 览 器 的 直 
连 操 作 。 示 例 代码 如 下 : 


exports.config = { 
directConnect:true, 

specs: ['todo-spec.js'], 
baseUrl: ‘'http://localhost:8080"', 


framework: "jasmine2" 
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除了 Chrome，Protractor 也 支持 对 Firefox 的 直 连 操作 ， 如 图 12-1 所 示 ， 但 仅 限于 直 连 47 
版 本 及 其 之 前 的 Firefox。 本 书 将 在 12.4.2 节 详细 解释 其 原因 和 人 解决 方案 。 
























































Nodejs 
Protractor 
WebDriverJs 
本 Selenium 
Chrome 驱 动 Firefox 驱 动 Seiver 
浏览 器 





图 12-1 ”驱动 浏览 器 

而 其 他 类 型 的 浏览 器 则 需要 Selenium Server 间 接 完成 操作 ， 因 为 并 不 是 每 种 浏览 器 
都 在 技术 上 支持 跨 机 器 的 远程 调用 。 在 这 种 情况 下 ， 为 了 满足 以 下 需求 ， 需 要 Selenium 
Server 充 当 远程 调用 中 转 的 角色 与 被 测 浏览 器 运行 在 相同 的 机 器 上 。 

@ 统一 的 接口 兼顾 多 种 浏览 器 和 版 本 

@ 统一 的 接口 兼顾 多 种 操作 系统 和 版 本 

@ 统一 的 接口 实现 分 布 式 测试 

测试 代码 只 需要 将 命令 发 送 到 远程 Selenium Server 即 可 ， 对 于 浏览 器 而 言 仍 然 是 本 地 
调用 。 


Selenium Server 并 不 等 同 于 Selenium RC 的 HITP 代 理 ，Selenium Server 的 


主要 作用 是 以 统一 的 接口 支持 远程 调用 。 





12.1.1 安装 Java JDK 


Selenium Server 依 赖 于 Java 运 行 环境 ， 在 运行 Selenium Server 前 需要 先 安装 Java JDK 
(Java SE Development Kit) ， 可 访问 http://www.oracle.com/technetwork/java/javase/ 
downloads/index.html 了 解 更 多 信息 。 作 者 撰写 本 书 时 JDK 的 最 新 版 本 为 Bu112， 如 图 12-2 
所 示 。 
根据 操作 系统 选择 对 应 的 JDK 安 装 包 ， 保 持 默 认 选 项 进行 安装 。 安 装 完成 后 ， 在 命令 
控制 台中 输入 java 并 按 回 车 键 ， 如 果 显 示 Java 的 用 法 介绍 ， 则 说 明 JDK 安 装 成 功 。 
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Java SE Development Kit 8u112 


You must accept the Oracle Binary Code License Agreement for Java SE to download this 
software. 
Thank you for accepting the Oracle Binary Code License Agreement for Java SE; you may 


now download this software. 

Product/ File Description File Size Download 
Linux x86 162.42MB _ jdk-8u112-linux-i586.rpm 
Linux x86 177.12 MB _ jdk-8u112-linux-i586 .tar.gz 
Linux x64 159.97 MB jdk-8u112-linux-x64.rpm 
Linux x64 174.73 MB jdk-8u112-linux-x64.tar.gz 
Mac OSX 223.15 MB jdk-8u112-macosx-x64.dmg 
Solaris SPARC 64-bit 139.78 MB _ jdk-8u112-solaris-sparcv9 .tar.Z 
Solaris SPARC 64-bit 99.06MB jdk-8u112-solaris-sparcv9 .tar.gz 
Solaris x64 140.46 MB jdk-8u112-solaris-x64.tar.Z 
Solaris x64 96.86 MB jdk-8u112-solaris-x64 .tar.gz 
Windows x86 188.99 MB jdk-8u112-windows-i586.exe 
Windows x64 195.13 MB jdk-8u112-windows-x64.exe 


图 12-2 ”Java SE 安装 包 


12.1.2 下 载 Selenium Server Standalone 


Selenium Server Standalone 是 运行 Selenium Server 的 载体 文件 ， 启 动 Selenium Server 前 
需要 先 下 载 Selenium Server Standalone。 

Protractor 依 赖 于 WebDriver 管 理工 具 webdriver-manager， 下 载 Protractor 后 可 以 直接 在 
命令 控制 台 执 行 以 下 命令 下 载 Selenium Server Standalone: 


node .\node modules\protractor\node modules\webdriver-manager update 


下 载 到 的 Selenium Server Standalone 二 进 制 文件 位 于 node_modules/protractor/node_ 
modules/webdriver-manager/selenium 文 件 夹 内 。 
如 果 使 用 全 局 Protractor 运 行 测试 用 例 ， 则 可 以 执行 以 下 命令 将 其 下 载 到 全 局 目录 : 


webdriver-manager update 


在 作者 撰写 本 书 时 ，webdriver-manager 默 认 下 载 的 是 Selenium 2 里 最 新 的 selenium- 
server-standalone-2.53.1.jar， 这 由 webdriver-manager 的 配置 文件 node_modules/protractor/ 


node_modules/webdriver-manager/built/config.json 所 决定 的 。 


"webdriverVersions": { 


"selenium": "2.53.1"， 
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"chromedriver"”: "2.25", 
"geckodriver"”s "v0O.11.1"”, 
"edriver”s "22:53" 
"androidsdk": "24.4.1", 


MW 


2016 年 10 月 ，Selenium 社 区 发 布 了 Selenium 3.0， 当 前 最 新 的 Selenium 
Server Standalone 二 进 制 文件 为 selenium-server-standalone-3.0.1.jar。 如 果 读者 希 


望 调整 webdriver-manager 的 默认 下 载 版 本 ， 可 以 修改 config.json 中 的 selenium 
字段 。 





除了 webdriver-manager 管 理工 具 ， 也 可 以 直接 访问 https://selenium-release.storage. 
googleapis.com/ 查 询 所 有 有 效 的 Selenium Server 版 本 及 其 下 载 地 址 ， 例 如 访问 https:// 


selenium-release.storage.googleapis.com/2.53/selenium-server-standalone-2.53.1.jar 下 载 2.53.1 


版 本 的 二 进 制 文件 。 


12.1.3 下 载 浏览 器 驱动 


除了 Selenium 二 进 制 文件 ，webdriver-manager update 命 令 也 可 以 用 于 下 载 浏 览 器 驱 
动 ， 它 默认 会 下 载 Chrome 对 应 的 chromedriver 和 Firefox 对 应 的 geckodriver， 同 样 保存 于 本 
地 文件 夹 node_modules/protractor/node_modules/webdriver-manager/selenium 中 。 在 命令 控制 
台 下 执行 以 下 命令 会 同时 下 载 正 的 32 位 和 64 位 驱动 : 


node .\node modules\protractor\node modules\webdriver-manager update --ie --ie32 


除了 通过 webdriver-manager 下 载 浏览 器 驱动 ， 也 可 以 直接 访问 对 应 的 网 站 分 别 进行 下 
载 ， 将 在 12.4 节 详细 介绍 。 


12.1.4 配置 Protractor 


在 Protractor 配 置 文件 内 设置 directConnect 为 false (默认 值 ) 。 运 行 测试 用 例 时 ， 
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Protractor 会 自动 在 当前 机 器 启动 Selenium Server。 在 此 之 前 ， 应 先 确保 已 经 通过 webdriver- 
manager update 下 载 了 Selenium Server Standalone 二 进 制 文件 和 Chrome 驱 动 。 设 置 代码 
如 下 : 


exports.config = { 
directConnect:false, 
specs: ['todo-spec.js'], 
baseUrl: 'http://localhost:8080"', 
capabilities:{ 
browserName:'chrome' 
}, 


framework: 'jasmine2' 


当 测 试 结束 后 ，Selenium Server 将 自动 停止 ， 如 图 12-3 所 示 。 


加 Administrator: Command Prompt I-I° 


] 1/launcher 
] I/local - Seleniun s 
7/wd/hub 





图 12-3 ”基于 Selenium Server 运 行 Protractor 
以 上 这 种 配置 非常 适合 测试 人 员 在 脚本 开发 或 修改 过 程 中 ， 迅 速 地 进行 本 地 验证 而 无 
需 依赖 于 专门 的 Selenium Server 服 务 器 。 





12.1.5 启动 Selenium Server 


除了 让 Protractor 代 为 启动 Selenium Server， 开 发 人 员 也 可 以 手工 启动 一 个 Selenium 
Server 并 让 Protractor 测 试用 例 运行 其 上 。 该 Selenium Server 既 可 以 运行 在 本 机 ， 也 可 以 运 
行 在 远程 机 器 中 。 

如 图 12-4 所 示 ， 在 命令 控制 台 下 执行 webdriver-manager start 命 令 ， 即 可 启动 Selenium 
Server， 它 默认 运行 在 4444 端 口 。 





E 
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四 Administrator Command Prompt - webdriver-manager start L= 1° 大 本 


:\>uebdriuer-manager start 
15] I/start — java -Duehbdriuer-chrome -driuer rs\Adnini: 
\protractor\node_nodules\webdriver-nanager\seleniun\chronedriver_2 

NUsers\Adninistrator\AppData\Roaning\npn\node eT et 
loniun\geckodriver va: 11.1. » C:\Us 和 ppData\Roaning\npn\node_modul 
ve: i i tandalone-2.53.1.jar -port 4444 
tart 一 seleniunPro i 
INFO — Launching a andalone Selenium Server 
INFO Java 3 rporation 25.112-bi5 
INFO wer 28912 R2 6.3 amd64 


INP' 
INFO 
INFO 


ems 中 aDriver 


INFO — 3 } > U2 Built fron revision a36hb8hbi 


a 
Driver provider org.-.openqa.seleniun.safari. Safar iDriver registration is skipped: 


capabilities Capabilities [{browserNane=safari, versiol platform=MAC}] does not match| 
blatform WIN8 
INE e class not found: org.openga.selenium.htnlunit.HtnlUnitDriver 

provider org.openqa-seleniun.htmlunit .HtnmlUnitDriver is not registered 
RemoteWebD instances should connect to: http://127.0.0.1:4444/wd/hub 
Seleniun Server is up and running 





图 12-4 用 webdriver-manager start 命 令 启动 Selenium Server 


修改 Protractor 配 置 脚本 如 下 ，seleniumAddress 字 段 指向 已 经 运行 的 Selenium Server 
地 址 。 


orts.config = { 





directConnect:false, 

specs: ['todo-spec.js'], 

baseUrl: 'http://localhost:8080°', 

seleniumAddress: 'http://192.168.2.52:4444/wd/hub', 
capabilities:{ 

browserName:'chrome' 

}, 

framework: 'jasmine2' 


] 


如 图 12-5 所 示 ， 测 试用 例 运行 在 指定 的 Selenium Server 上 。 


Le Administrator: Command Prompt 





local.conf - 
at - Using the selenium server at http://192.168.2.52:4444/wd/h| 


auncher — Running 1 instances of WebDriver 


日 failures 
2.838 seconds 
] I/launcher — @ instanceKs》 of WebDriver 11 running 
1 I/launcher chrome #BL passed 





图 12-5 ”运行 测试 用 例 
除了 webdriver-manager， 开 发 人 员 也 可 以 直接 在 命令 控制 台 调 用 java 命 令 启动 
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Selenium Server， 这 比较 适合 手工 下 载 Selenium Server Standalone 二 进 制 文件 和 各 浏览 器 驱 
动 的 情况 。 如 图 12-6 所 示 ， 分 别 通过 Dwebdriver chrome.driver 和 jar 参 数 指 定 Chrome 驱 动 和 
Selenium Server Standalone 二 进 制 文件 的 路 径 ， 并 将 Selenium Server 运 行 在 5000 端 口上 。 


男 Administrator Command Prompt - java -Dwebdriver.chrome.driver=c\selenium\chromedriver_2.25.exe..| ~ | © | 


hronedriv exe -jar selenium-seruer-st 


om revision a36b8hl 


OperaDriu 
skipped: 


does not matchl 


ould conn 
nning 





图 12-6 ”用 java 命 令 启 动 Selenium Server 


12.2 JSON Wire ProtocolSW3C 
WebDriver 标 准 


无 论 是 使 用 Protractor 通 过 Selenium Server 远 程 操作 浏览 器 ， 还 是 如 第 10 章 所 述 通过 
C#j 进 行 本 地 操作 ， 技 术 基 础 都 是 Selenium 社 区 主持 的 JSON Wire Protocol? 协 议 。 它 统一 了 
WebDriver 的 浏览 器 接口 ， 定 义 了 基于 REST 概 念 的 服务 端 客户 端 通信 协议 。REST 是 一 种 
分 布 式 系统 的 实现 风格 ， 由 Roy Fielding 于 2000 年 在 他 的 博士 论文 中 提出 2， 目 前 广泛 的 在 
各 网 络 应 用 中 得 到 了 实现 。 
基于 JSON Wire Protocol 协 议 ，Selenium 社 区 对 各 浏览 器 驱动 进行 了 服务 端 实现 ， 而 
各 种 WebDriver 的 编程 语言 绑 定 则 是 客户 端的 实现 。 客 户 端 与 服务 端 基于 JSON 格 式 ， 通 过 
HTTP 以 请 求 和 响应 的 方式 进行 通信 ， 把 浏览 器 的 操作 命令 传 给 服务 端 。 








使 用 C# 进 行 远程 操作 时 ， 需 要 使 用 RemoteWebDriver， 并 将 Selenium 


Server 地 址 作为 参数 传 入 。 





个 SeleniumHQ. JsonWireProtocol[OL]. [2016]. https://github.com/SeleniumHQ/selenium/wiki/ 
JsonWireProtocol. 

© Roy Thomas Fielding. Representational State Transfer[OL]. 2000. http://www.ics.uci.edu/~fielding/pubs/ 
dissertation/rest_arch style.htm. 
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随 着 WebDriver 的 迅速 发 展 ，Browser Testing and Tools 工 作 组 成 立 ， 成 员 来 自 于 
Microsoft、Google 和 Mozilla 等 公司 ， 包 括 大 名 里 易 的 WebDriver 创 建 者 Simon Stewart® 。 
该 工作 组 致力 于 将 WebDriver API 这 套 无 关 平台 、 无 关 语言 的 浏览 器 接口 标准 化 ， 即 现 
在 的 W3C WebDriver@， 它 是 对 JSON Wire Protocol 的 进一步 完善 与 扩展 。 当 前 ，W3C 
WebDriver 标 准 仍然 处 于 修订 状态 ， 但 各 厂商 已 经 开始 基于 W3C 标 准 对 各 自 的 浏览 器 驱动 
进行 开发 ， 例 如 Mozilla 的 geckodriver 等 。 

W3C WebDriver 和 JSON Wire Protocol 都 是 基于 HTTP 协 议 实现 的 ， 这 意味 着 任何 支持 
HTTP 调 用 的 编程 语言 都 可 以 实现 WebDriver 的 客户 端 绑 定 。 对 于 开发 人 员 而 言 ， 并 不 需要 
深入 了 解 W3C WebDriver 标 准 的 每 一 个 细节 ， 但 理解 它 的 实现 原理 对 以 后 项 目 中 修改 框架 
以 及 二 次 开发 有 很 大 帮助 。 

以 下 步骤 通过 Chrome 的 插件 Postman， 演 示 如 何 通 过 手工 发 送 HTTP 请 求 ， 模 拟 
Protractor 操 作 浏 览 器 的 过 程 。 

(1) 在 http://192.168.2.51:4444 上 启动 Selenium Server。 

(2) 如 图 12-7 所 示 ， 在 Postman 中 发 送 POST 请 求 http://192.168.2.51:4444/wd/hub/session 
创建 一 个 新 的 会 话 Session。 每 一 个 会 话 与 某 个 浏览 器 对 象 对 应 ， 本 示例 通过 在 Body 内 指 
定 browserName 创 建 了 一 个 Chrome 对 象 的 会 话 。Selenium Server 接 受到 该 请 求 后 ， 返 回 
JSON 对 象 ， 并 包含 SessionId 作 为 该 会 话 的 唯一 标识 。 


POST tp://192.168.2.51-4444/wd/hub/sessio Params Send 
(DBodye@ 


form-data x-www-form-urlencoded 。 填 raw binary J5ON jcat 


“desiredcapabilities":{"browserName": "chrone”, "count":1} 


Prerty evie JsoN 己 


2 "state": null, 
3 "sessionId": "Eee ra i", 
4 "hCode": 1219438879, 


图 12-7 创建 会 话 


四 W3C. Participants in the Browser Testing and Tools Working Group[OL]. [2016]. https://www. 
WwW3.org/2000/09/dbwg/details?group=49799&public=1. 
@ W3C.WebDriver[OL]. [2016]. https://www.w3.org/TR/webdriver/. 
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(3) 发 送 POST 请 求 http://192.168.2.51:4444/wd/hub/session/<SessionId>/url， 其 
中 ，SessionId 为 上 一 步 返回 得 到 的 会 话 标识 id。 如 图 12-8 所 示 ， 在 请 求 的 Body 内 指定 
目标 地 址 为 http://www.bing.com，Selenium Server 在 浏览 器 内 打开 对 应 网 站 并 返回 成 功 
的 状态 。 


POST 立 PEEP TE Params | sera ~ 


Muthorization Headers Body® PrerequestScript Test 





form-data x-www-form-urlencoded 。 者 raw binary Text 


1 
2 “url":“http://www.bing.com” 


| 
aody Cookies Headers (9) Tes Status: 200 OK 
Prety Raw review JsoNv 忆 
ef{ 
2 "state": "EUGGESS ， 
3 "sessionId": "aceb37d1-1964-4b6d-ad69-da4b9cd94686"， 


图 12-8 打开 网 站 
(4) 发 送 GET 请 求 http://192.168.2.51:4444/wd/hub/session/<SessionId>/title， 获 取 已 打 
开 的 网 站 的 标题 。 如 图 12-9 所 示 ，Bing 被 成 功 返 回 。 














a i 

Authorization Headers Pre-request Si Te 

Type No Auth v 
Body Cookie Headers (6) Tests Status: 200 OK 
pretty Raw oreview JsSONY 忆 

1°{ 

2 "state": "success", 

3 "sessionId": “aceb37d1-1964-4b6d-ad69-da4b9cd94689"， 

4 "hCode": 

"value” 

6 "class org.openqa.selenium.remote.Response"， 

vs "status": @ 

Ba } 


图 12-9 返回 标题 
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12.3 Selenium 3.0 


2016 年 10 月 ，Selenium 社 区 发 布 了 Selenium 3.0?。 与 Selenium 2.0 相 比 ，3.0 版 本 最 显 
著 的 变化 是 移 除了 基于 JavaScript 的 Selenium Core 和 Selenium RC API， 这 意味 着 所 有 基于 
Selenium RC 的 测试 将 遇 到 兼容 性 问题 ， 具 体 解决 办 法 请 参考 https://seleniumhq.wordpress. 
com/2016/10/04/selenium-3-is-coming/ 中 的 论述 。 考 虑 到 Selenium RC 已 经 退出 历史 舞台， 
对 于 所 有 新 自动 化 测试 项 目 ， 强 烈 建议 基于 WebDrive 开 展 测试 工作 。 

对 于 已 经 在 Selenium 2.0 上 进行 WebDriver 自 动 化 测试 的 情况 ， 由 于 Selenium 3.0 并 没 
有 移 除 已 有 的 WebDriver API， 这 些 测试 用 例 应 该 可 以 直接 运行 于 Selenium 3.0 上 。 不 过 
考虑 到 3.0 版 刚刚 发 布 ， 仍 然 存 在 缺陷 修复 的 情况 ， 如 果 读 者 遇 到 任何 兼容 性 问题 ， 建 
议 关 注 Selenium 3.0 对 应 的 发 布 公告 。 在 作者 编写 本 书 的 时 候 ， 对 应 于 Selenium 3.0 的 最 
新 Selenium Server Standalone 二 进 制 文件 是 3.0.1 版 本 ， 可 以 在 网 址 https://selenium-release. 
storage.googleapis.com/2.53/selenium/selenium-server-standalone-3.0.1.jar 处 下 载 。 在 命令 控 
制 台 执行 以 下 命令 即 可 启动 Selenium Server 3， 其 他 参数 与 2.0 版 一 致 。 


java -jar selenium-server-standalone-3.0.1.jar 


考虑 到 Selenium 3.0 刚 正式 发 布 ， 而 Protractor 的 默认 下 载 版 本 仍然 是 Selenium 2.0， 本 
书后 续 将 仍然 基于 Selenium 2.0 进 行 Protractor 演 示 。 





12.4 ”配置 浏览 器 


如 表 12-1 所 示 ，Protractor 对 Chrome、Firefox、Safari、IE 和 Edge 都 有 良好 的 支持 。 
尽管 PhantomJS 也 能 够 被 Protractor 所 驱动 ， 但 因为 PhantomJS 的 某 些 行为 与 真实 的 浏览 
器 不 一 致 ，Protractor 开 发 组 不 建议 使 用 PhantomJS 进 行 Protractor 自 动 化 测试 。 另 外 ， 
目前 Protractor 还 不 支持 Opera， 如 果 项 目 中 需要 使 用 到 Opera， 建 议 使 用 其 他 测试 框架 


人 SeleniumHQ. Selenium 3.0: Out Now![OL]. 2016. https://seleniumhq wordpress.com/2016/10/13/selenium- 
3-0-out-now/. 
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和 编程 语言 。 
表 12-1 ”Protractor 对 浏览 器 的 支持 





加 
号 
站 
还 





Chrome 





Firefox 





Safari 





Edge 





IE 





Opera 


蕊 | 向 | 向 | 并 | 疝 | 疝 








PhantomJS 


不 推荐 








Protractor 不 仅 可 以 在 capabilities 字 段 中 通过 browserName 设 置 目 标 浏览 器 的 名 字 ， 也 
可 以 对 测试 行为 进行 配制 。 例 如 以 下 代码 将 代理 设置 为 http://localhost.com:8445/。 


exports.config = { 

directConnect:true, 

capabilities: {browserName: chrome, 

proxy: { 
proxyType: 'manual', 
httpProxy: 'http://localhost.com:8445/' 
}, 

}, 

specs: ['todo-spec.js'], 

baseUrl: 'http://localhost:8080"' 


FF 


表 12-2 为 自动 化 测试 中 常用 的 浏览 器 capability 的 选项 。 
表 12-2 ”常用 浏览 器 capability 的 选项 





名 称 | 类 型 





browserName | string 浏览 器 的 名 字 





Version | string 浏览 器 的 版 本 





platform [string 操作 系统 的 名 字 
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( 续 表 ) 
名 称 类 型 描 述 

wi ee i 默认 为 济 
count number 属于 当前 配置 选项 的 测试 用 例 的 运行 次 数 ， 默 认为 1 
dis sis 人 下 的 测试 文件 是 否 可 以 并 行 执行 ， 默 
maxInstances number 当前 配置 选项 下 ， 能 同时 运行 的 浏览 器 个 数 
specs string[] 只 在 当前 配置 选项 下 运行 的 测试 文件 
exclude string[] 不 在 当前 配置 选项 下 运行 的 测试 文件 
databaseEnabled boolean Session 是 否 可 以 与 数据 库存 储 交互 
applicationCacheEnabled ”|boolean Session 是 否 可 以 与 应 用 的 缓存 交互 
webStorageEnabled boolean Session 是 否 可 以 与 Web 缓 存 交 互 
acceptSslCerts boolean Session 是 否 默认 接受 所 有 的 SSL 证 书 
proxy proxy JSON object 设置 代理 
unexpectedAlertBehaviour |string se 机 a ee exeeplipny 则 以 设 过 


大 型 应 用 的 测试 用 例 往往 很 多 ， 结 合 使 用 shardTestFiles 和 maxInstances 可 以 大 幅 提 高 
测试 效率 。 例 如 以 下 配置 文件 中 包含 两 个 测试 文件 ， 设 置 shardTestFiles 为 true 后 允许 这 两 
个 测试 文件 中 的 用 例 以 并 行 的 方式 运行 在 不 同 的 Chrome 浏 览 器 内 ， 如 图 12-10 所 示 ， 有 两 
个 Chrome 浏 览 器 对 象 同 时 被 启动 。 


exports.config = { 
directConnect:false, 
specs: ['todo-spec.js','todo-spec2.js'], 
baseUrl: 'http://localhost:8080°', 
capabilities:{ 
browserName:'chrome', 
shardTestFiles:true, 


maxInstances:2 


除了 以 上 共同 的 属性 ， 不 同 的 浏览 器 还 支持 各 自 独 有 的 配置 选项 ， 读 者 可 以 参考 网 址 
https://github.com/SeleniumHQ/selenium/wiki/DesiredCapabilities 中 的 内 容 。 
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加 Administrator Command Prompt [= .= | 


>protractor local.conf. 
] IZlauncher — Runnin tances of WebDriver 


#81-1] PI 
d 


seconds 
1 - Shutting dovn seleniun standalone s 


instanceCs) of WebDriver still running 


[c e #01-8] PID: 4698 
oDoList\todo 


Izlocal — 5 
I/local s| e http://192.168.2.52:54936/ 


Shutting down selenium standalone ser' 


anceKs》 of WebDriver still running 
#01-1 
me #01-9 3 





图 12-10 “并行 执行 测试 脚本 


12.4.1 _ Chrome 






Protractor 默 认 使 用 Chrome 驱 动 测试 用 例 ， 在 进行 测试 之 前 ， 需 要 确保 Chrome 驱 动 已 
经 被 下 载 到 本 地 。 执 行 以 下 命令 即 可 启动 支持 Chrome 的 Selenium Server， 当 然 ， 读 者 也 可 


用 webdriver-manage 启 动 Selenium Server。 


条 





java -Dwebdriver.chrome.driver=c:\selenium\vchromedriver_. xe -jar selenium-serVer- 





standalone-2.53.1.jar -port 5000 


在 以 上 命令 中 ，Chrome 驱 动 被 放置 于 c:\selenium 下 ， 并 通过 Dwebdriverchrome.driver 
参数 指定 驱动 所 在 路 径 。 





12.4.2 Firefox 











T 








对 于 Firefox 47 及 其 之 前 的 版 本 ， 用 于 Selenium 自 动 化 测试 的 Firefox 驱 动 由 Selenium 社 
区 通过 Firefox 插 件 的 形式 提供 ， 该 插件 已 经 被 包含 在 了 Selenium 包 内 ， 测 试 开始 后 会 被 自 
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动 加 载 。 所 以 ， 对 于 Firefox 47 及 其 之 前 版 本 的 自动 化 测试 ， 无 论 是 C#、Java 还 是 Protractor 
都 无 需 专 门下 载 浏览 器 驱动 ， 这 一 点 是 区 别 于 其 他 浏览 器 的 地 方 。 

与 Chrome 类 似 ， 在 Protractor 中 通过 设置 directConnect 即 可 直接 连接 到 Firefox， 示 例 配 
置 如 下 : 





exports.config = { 
directConnect:true, 

specs: ['todo-spec.js'], 
baseUrl: 'http://localhost:8080°', 
capabilities:{ 

browserName:'firefox' 

}, 


framework: 'jasmine2' 


同样 ， 无 需 指定 驱动 路 径 ， 以 下 命令 启动 Selenium Server 后 即 直 接 支 持 Firefox 47: 


java -jar selenium-server-standalone-2.53.1.jar 


Mozilla 于 2016 年 6 月 推出 Firefox 48， 该 版 本 带 来 的 重大 变化 是 无 论 正式 发 布 版 还 是 测 
试 版 ， 任 何 未 签名 的 Firefox 插 件 都 无 法 安装 ?。 所 以 ， 从 Firefox 48 开 始 ，Selenium 社 区 的 
驱动 插件 不 再 适用 ，Protractor 也 无 法 直 连 版 本 为 48 之 后 的 Firefox。 

为 了 解决 针对 Firefox 48 之 后 版 本 的 自动 化 测试 问题 ，Mozilla 基 于 W3C WebDriver 标 
准 开发 了 geckodriver 用 于 支持 Gecko 浏 览 器 包括 Firefox 的 自动 化 测试 。 与 其 他 浏览 器 驱动 
类 似 ，geckodriver 需 要 单独 下 载 ， 在 作者 编写 本 书 时 它 的 最 新 版 本 为 0.11.1， 可 以 从 网 址 
https://github.com/mozilla/geckodriver/releases 处 获得 。 


© 


以 下 命令 使 用 Selenium 2 启动 Selenium Server 并 支持 Firefox 48 及 以 后 的 版 本 : 





请 注意 ， 引 入 geckodriver 的 直接 原因 是 Firefox 的 版 本 及 其 设计 发 生 了 变 
化 ， 与 Selenium 3 无 关 。 














@® Mozilla. Add-ons/Extension Signing[OL]. [2016]. https://wiki.mozilla.org/Addons/Extension Signing. 
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geckodriver 基 于 Mozilla 的 Marionette? 自 动 化 协议 实现 ， 为 了 让 Protractor 自 动 化 脚本 
能 够 运行 在 Selenium 2 之 上 的 Selenium Server， 需 要 在 配置 文件 中 启用 Marionette， 代 码 
如 下 : 





由 于 Selenium 3 默认 启用 了 Marionette， 因 此 无 需 在 Protractor 配 置 文件 中 进行 声明 。 





© Mozilla. Marionette[OL]. [2016]. https://developermozillaorg/en-US/docs/Mozilla/QA/Marionette 
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}, 


framework: "jasmine2" 


以 下 命令 使 用 Selenium 3 启动 Selenium Server 并 支持 Firefox 48 及 以 后 的 版 本 : 


java -jar selenium-server-standalone-3.0.1.jar -Dwebdriver.gecko.driver=c:\selenium\ 


geckodriver-v0.11.1.exe 


当前 geckodriver 还 没有 正式 发 布 ， 仍 处 于 频繁 的 功能 更 新 和 缺陷 修复 阶段 ，Protractor 
官方 建议 仍然 以 Firefox 47 为 主要 的 测 斌 对象?"， 读 者 后 续 可 以 在 https://github.com/mozilla/ 
geckodriver 持 续 关 注 geckodriver 的 开发 进展 。 


老 版 本 的 Firefox 可 以 从 网 址 https://ftp.mozilla.org/pub/firefox/releases/ 处 下 


载 ， 建 议 安装 后 取消 自动 升级 ， 否 则 Firefox 会 自动 升级 到 最 高 版 本 。 





12.4.3 Edge 


Edge 浏 览 器 的 驱动 由 微软 提供 ， 可 以 从 网 址 https://developer.microsoft.com/en-us/ 
microsoft-edge/tools/webdriver/ 处 下 载 。 它 同时 支持 W3C WebDriver 标 准 和 JSON Wire 
Protocol， 以 实现 向 后 兼容 。 下 载 前 ， 请 确保 浏览 器 驱动 与 操作 系统 版 本 号 保持 一 致 。 

以 下 命令 用 于 启动 Selenium Server 并 支持 Edge: 


java -jar selenium-server-standalone-2.53.1.jar -Dwebdriver.edge.driver=c:\selenium\ 


MicrosoftWebDriver.exe 


Protractor 配 置 文件 声明 测试 对 象 为 Edge 浏 览 器 ， 代 码 如 下 : 


exports.config = { 

directConnect:false, 

seleniumAddress: "http://192.168.2.52:4444/wd/hub'， 
specs: ['todo-spec.js'], 


@® Protractor. Browser Support[OL]. [2016]. https://github.com/angular/protractor/blob/f9c8a37f7dbecldccec2 
ddeObd6884ad7ae3f5c7/docs/browser-support.md. 
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12.4.4 IE 


正 浏览 器 的 驱动 可 以 从 网 址 http://docs.seleniumhq.org/download/ 处 下 载 。 由 于 实际 环境 
下 32 位 的 焉 使 用 居多 ， 而 在 64 位 的 浏览 器 驱动 下 输入 框 操作 性 能 很 慢 ， 建 议 读者 使 用 32 位 
的 正 浏览 器 驱动 进行 自动 化 测试 。 

以 下 命令 用 于 启动 Selenium Server 并 支持 IE: 





Protractor 配 置 文件 声明 测试 对 象 为 正 浏览 器 ， 代 码 如 下 : 
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IE 11 是 目前 微软 唯一 支持 的 正版 本 ， 为 保证 在 IE 11 上 正常 运行 测试 用 例 ， 请 确保 在 
进行 测试 前 完成 以 下 设置 : 
(1) 启动 IE 11， 执 行 菜单 命令 View 一 Zoom， 设 置 缩放 比例 为 100%， 如 图 12-11 所 示 。 





Ss aboutblank DP- ©)s Blankpa 
rile Edit PE Favorites os Help 

Toolbars > 
Explorer bars > 
Goto ; 
Stop Esc 
Refresh F5 
Zoom (154%) 四 ”zoomin Ctrl + 
Text size > Zoom out Ctrl - 
Encoding > 400% 
Style ”300% 
Caret browsing Fm 250% 
Source CulrU 200% 
Security report 175% 
International website address 150% Ctrl+0 
Webpage privacy report 125% 
Full screen Fl1 100% 

75% 

50% 

Custom. 





图 12-11 设置 IE 的 缩放 比例 
(2) 执行 菜单 命令 Tools 一 Intemet Options， 在 弹出 的 对 话 框 中 选择 Security 选 项 卡 ， 
确保 Intemet、Local intranet、Trusted sites 和 Restricted sites 都 取消 勾 选 Enable Protected Mode 
复 选 框 ， 如 图 12-12 所 示 。 
Internet Options ? 


General Security privacy Content Connections Programs Advanced 


Select a zone to view or change security settings. 


@ Ed ”+ © 








Internet Local Trusted Restricted 
intranet Sites sites 
Internet 
@ This zone is for Internet websites, 
except those listed in trusted and 
restricted zones. 


Security level for this zone 
Allowed levels for this zone: Medium to High 
Medium-high 
- Appropriate for most websites 
| ~ Prompts before downloading potentially unsafe 
content 
- Unsigned ActiveX controls will not be downloaded 











Enable Protected Mode (requires restarting Internet Explorer) 
图 12-12 ”设置 IE 的 保护 模式 
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(3) 执行 菜单 命令 Tools 一 Internet Options， 在 弹出 的 对 话 框 中 选择 Advanced 选 项 
卡 ， 取 消 勾 选 Enable Enhanced Protected Mode 复 选 框 ， 如 图 12-13 所 示 。 
Internet Options ? x 


General Security Privacy Content Connections Programs Advanced 


Settings — 





DDo not save encrypted pages to disk 到 
口 Empty Temporary Internet Files folder when browser is clo 
口 Enable 64-bit processes for Enhanced Protected Mode* 

回 Enable DOM Storage 
mlEnable Enhanced Protected Mode| 

回 Enable Integrated Windows Authentication* 

回 Enable native XMLHTTP support 

回 Enable SmartScreen Filter 

口 Send Do Not Track requests to sites you visit in Internet E> 
口 Use SSL3.0 

| 回 UseTLS 1.0 


图 12-13 ”设置 IE 的 增强 保护 模式 


(4) 对 于 32 位 系统 ， 确 保 注册 表 键 HKEY_LOCAL_MACHINE\SOFTWARE' 
Microsoft\Internet Explorer\Main\FeatureControl\FEATURE BFCACHE 存 在 ， 创 建 一 
个 DWORD 类 型 的 键 ， 名 字 为 lexplore.exe， 值 为 0。 对 于 64 位 系统 ， 确 保 注册 表 键 
HKEY LOCAL MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\Main\ 
FeatureControl\FEATURE_BFCACHE 存 在 ,创建 一 个 DWORD 类 型 的 键 ， 名 字 为 iexplore. 
exe， 值 为 0。 


12.4.5 ”多 浏览 器 测试 


在 启动 Selenium Server 的 时 候 ， 通 过 参数 指定 不 同 浏览 器 的 驱动 ， 该 Selenium Server 
可 以 同时 支持 多 种 浏览 器 的 测试 。 例 如 以 下 Selenium Server 同 时 支持 正 、Edge 和 Chrome。 


java -jar selenium-server-standalone-2.53.1.jar 
-Dwebdriver.ie.driver=c:\selenium\IEDriverServer.exe 
-Dwebdriver.edge.driver=c:\selenium\MicrosoftWebDriver.exe 


-Dwebdriver.chrome.driver=c:\selenium\chromedriver 2.25.exe 


为 了 避免 命令 行 参数 过 长 ， 可 以 把 驱动 所 在 文件 夹 设置 到 Path 环 境 变 量 内 ， 如 图 12-4 
所 示 。 
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Computer Name Handware AMdvanced System Protection Remote 


You must be logged on as an Administratorto make most of these changes. 








User variables for jacwu 




















Variable Value 
path %USERPROFILEI\AppData\Loca\Microsoft\WindowsApps;c.\selen... 
TEMP USERPROFILEI\AppData\Loca\Temp 
TMP 
Edit environment variable X 
%USERPROFILE36\AppData\LocaINMicrosoft\WindowsApps New 
Edit 











图 12-14 ”添加 环境 变量 
添加 了 环境 变量 后 ， 命 令 无 需 再 指定 驱动 全 路 径 ，Selenium Server 会 根据 名 称 在 Path 
环境 变量 内 自动 匹配 对 应 的 驱动 。 


java -jar selenium-server-standalone-2.53.1.jar 
-Dwebdriver.ie.driver=IEDriverServer .exe 
-Dwebdriver.edge.driver=MicrosoftWebDriver.exe 


-Dwebdriver.chrome.driver=chromedriver 2.25.exe 


为 了 让 Protractor 测 试用 例 能 够 同时 在 多 种 浏览 器 上 运行 ， 需 要 使 用 multiCapabilities 指 
定 各 个 目标 浏览 器 的 名 字 。 以 下 示例 代码 同时 支持 Firefox、Chrome 和 IE。 


exports.config = { 
directConnect:false, 
seleniumAddress: 'http://192.168.2.52:4444/wd/hub', 
specs: ['todo-spec.js'], 
baseUrl: ‘http://localhost:8080°, 
multiCapabilities: [ 
{browserName: 'firefox'}, 
{browserName: 'chrome'}, 


{browserName: ‘'internet explorer'}], 
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framework: "jasmine2" 


jz 


读者 可 能 还 记得 第 10 章 的 C# 示 例 中 通过 工厂 模式 创建 的 浏览 器 对 象 。 比 较 而 言 ， 
Protractor 通 过 配置 文件 指定 浏览 器 的 方式 更 为 方便 、 灵 活 ， 任 何 时 候 如 果 要 增加 或 减少 对 
某 种 浏览 器 的 支持 ， 只 需要 修改 配置 文件 即 可 ， 无 需 任 何 额外 的 编译 过 程 。 


第 13 章 
自动 化 测试 最 佳 实践 ~ 
8 


Protractor 为 用 户 提 供 了 自动 化 测试 框架 ， 那 么 如 何 编写 复 用 率 高 、 维 护 成 本 低 的 测试 
代码 呢 ? 本章 将 基于 Protractor 介 绍 自动 化 测试 中 的 最 佳 实践 ， 探 讨 如 何 开发 一 个 高 复 用 度 
的 测试 框架 。 

本 章 将 介绍 : 

页 面 对 象 模型 
数据 驱动 测试 
测试 报告 

性 能 测试 

图 像 匹 配 
任务 自动 化 


13.1 页 面 对 象 模型 


结合 Jasmine 对 测试 用 例 进 行 组 织 ，Protractor 提 供 了 完整 的 自动 化 测试 解决 方案 ， 这 
是 不 是 就 意味 着 开发 人 员 就 一 定 可 以 基于 Protractor 进 行 低 成 本 、 高 效率 的 自动 化 测试 呢 ? 
答案 是 否定 的 。 

自动 化 与 人 工 测试 最 大 的 区 别 就 是 通过 代码 驱动 测试 ， 这 是 自动 化 的 优势 所 在 ， 但 也 
往往 是 很 多 自动 化 测试 失败 的 根源 。 特 别 是 大 型 项 目 ， 随 着 页 面 功能 不 断 增多 ， 页 面 交互 
变 得 复杂 ， 开 发 人 员 不 得 不 反复 投入 大 量 精力 重新 编写 已 经 写 好 的 测试 代码 ， 以 满足 新 的 

例如 网 站 的 登录 表单 作为 一 个 关键 功能 ， 往 往 在 多 个 测试 用 例 中 出 现 。 由 于 登录 会 涉 
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及 到 用 户 名 、 密 码 的 文本 框 和 提交 按钮 ， 缺 乏 良好 的 代码 组 织 结构 会 导致 大 量 重 复 的 代码 
查找 、 填 写 文本 框 操作 。 如 果 登 录 元 素 的 文档 结构 发 生 了 变化 ， 则 重 构 测 试 脚本 的 查找 逻 

会 带 来 更 多 的 维护 工作 量 ， 甚 至 可 能 因为 修改 不 完全 导致 无 谓 的 脚本 运行 错误 ， 需 要 额 
外 的 人 力 进 行 排 错 。 因 此 ， 如 何 编写 复 用 率 高 、 维 护 成 本 低 的 脚本 成 为 一 个 自动 化 测试 项 
目 能 否 成 功 的 关键 。 


13.1.1 关注 点 分 离 


页 面 对 象 模型 (Page Object?) 是 自动 化 测试 中 至 关 重 要 的 设计 模式 ， 核 心 是 基于 关 
注 点 分 离 〈Separation of Concerns) 的 思想 ， 对 页 面 元 素 和 方法 实现 最 大 程度 的 封装 与 复 
用 。 关 注 点 分 离 于 1974 年 由 Edsger W. Dijkstra 提 出 8， 是 处 理 复杂 性 问题 的 方法 论 。 关 注 点 
混杂 在 一 起 会 导致 复杂 性 的 大 大 增加 ， 把 关注 点 分 离 出 来 ， 进 行 标示 、 封 装 和 操纵 可 以 化 
繁 为 简 ， 让 复杂 问题 简单 化 。 关 注 点 分 离 的 思想 在 面向 对 象 的 程序 设计 领域 得 到 了 蓬勃 发 
展 ， 特 定 领 域 的 实现 会 从 业务 逻辑 流 中 独立 出 来 ， 封 装 成 类 或 函数 ， 这 样 原来 分 散在 整个 
应 用 程序 中 的 变动 就 可 以 很 好 的 管理 起 来 。 

页 面 对 象 模型 正 是 基于 关注 点 分 离 思 想 把 页 面 中 的 公用 对 象 和 公用 方法 封装 起 来 的 设 
计 模 式 。 图 13-1 所 示 是 Martin Fowler 对 页 面 对 象 模型 的 概括 。 在 页 面 对 象 模型 中 ， 公 用 对 
象 包括 被 重复 使 用 的 文本 框 、 按 钮 等 ， 被 封装 后 在 编写 脚本 时 可 随时 调用 。 当 这 些 对 象 的 
属性 因为 需求 变更 而 需要 修改 时 ， 只 需 修改 该 对 象 的 封装 部 分 即 可 ， 而 无 需 修改 所 有 的 相 
关 测 试 脚本 。 公 用 方法 包括 页 面 中 的 各 独立 功能 ， 封 装 后 可 被 直接 调用 而 无 需 关 注 其 内 部 
实现 。 

基于 关注 点 分 离 的 思想 ， 自 动 化 测试 框架 往往 由 两 层 组 成 ， 基 于 具体 项 目的 需求 ， 
可 以 由 相同 或 不 同 的 开发 人 员 分 别 编写 完成 。 底 层 为 封装 后 的 页 面 对 象 ， 可 以 供 测试 脚 
本 直接 调用 ， 上 层 为 具体 的 测试 用 例 ， 调 用 底层 的 页 面 对 象 ， 组 装 为 一 个 复杂 的 工作 
流 。 在 实际 实施 过 程 中 ， 上 层 的 测试 用 例 往往 不 用 关心 具体 页 面 对 象 的 内 部 实现 逻辑 ， 只 
需要 负责 进行 业务 组 装 即 可 ;同样 的 ， 如 果 某 个 具体 功能 点 的 内 部 实现 发 生 了 变化 ， 只 需 
要 修改 对 和 象 模型 而 不 用 重 构 上 层 肢 本， 这 也 是 其 可 以 由 不 同 的 开发 人 员 协 同 工 作 完 成 的 
基础 。 
@ Martin Fowler. PageObject[OL] 2013. http://martinfowler com/bliki/PageObject html. 


©@ Edsger W. Dijkstra. On the role of scientific thought[OL]. 1974. http://www.cs.utexas.edu/users/EWD/ 
transcriptions 人 EWD04xxEWD447.html/. 
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4 4 selectAlbumwithTitle() 
thic AFI 5 abovt 一 -人 etc 


the application updateRating(5) 
Page Objects 


4 / findElementsWithclass('album') 
this AF15 一 人 人 findElenentsWithclass('title-field') 
abovt HTML- getText() 
click() 
findElementsWithClass( ratings-field’) 
setText(5) 





tite: Whiteout 


artist: In the Country title: Ouro Negro 
rating: artist Moacir Santos 


rating; 





图 13-1 ”页面 对 象 模型 


13.1.2 ”实现 Protractor 页 面 对 象 


实现 页 面 对 象 的 关键 是 以 面向 对 象 的 思想 对 页 面 进行 封装 ， 每 个 页 面 以 一 个 类 的 形式 
存在 。 

对 于 在 Java 和 Cf# 中 如 何 定义 一 个 类 ， 大 家 都 比较 熟悉 ， 但 在 JavaScript 中 该 如 何 用 类 定 
义 页 面 对 象 呢 ? 

本 节 将 以 http://angular.github.io/angular-phonecat/step-14/app 作 为 被 测 对 象 ， 演 示 在 
Protractor 中 实现 页 面 对 象 的 方法 。 这 是 一 个 用 于 AngularJS 教 学 的 著名 示例 ， 包 括 有 大 量 
AngularJS 的 基础 知识 和 实现 方法 。 

该 示例 包含 两 个 页 面 ， 主 页 以 列表 的 形式 显示 各 种 品牌 的 移动 设备 ， 同 时 支持 关键 字 
查找 和 排序 ， 如 图 13-2 所 示 。 

在 该 主页 中 单 击 任何 一 个 移动 设备 即 进 入 设备 详情 页 面 ， 包 括 各 缩 略图 和 技术 指标 ， 
如 图 13-3 所 示 。 
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© | © anguaromnubia 


Search: 

Motorola XOOM with Wi-Fi 

The Next Next Generation Experience the future with Motorola XOOM with Wi-Fi, 
Sort by: tablet powered by Android 3.0 (Honeycomb) 


Newest v 


MOTOROLA XOOM™ 
The Next, Next Generation Experience the future with MOTOROLA XOOM, the wol 
powered by Android 3.0 (Honeycomb). 





MOTOROLA ATRIX™ 4G 
MOTOROLA ATRIX 4G the world's most powerful smartphone 


Dell Streak 7 
Introducing Dell™ Streak 7. Share photos, videos and movies together It's small er 
around, big enough to gather around 


图 13-2 ”被 测 应 用 主页 





Motorola XOOM™ with Wi-Fi 


Motorola XOOM with Wi-Fi has a super-powerful dual-core processor and Androld' 
3.0 (Honeycomb) 一 the Androld platform designed specifically for tablets With its 
inch HD widescreen display you'll enjoy HD video in a thin, light, powerful and 


upgradeable tablet 




















图 13-3 ”被 测 应 用 详细 页 面 
首先 搭建 Protractor 测 试 环境 以 及 下 载 相关 的 浏览 器 驱动 。 创 建 本 地 文件 夹 phonecat- 
e2e， 启 动 命令 控制 台 后 执行 以 下 命令 : 
npm init 
npm install protractor --save-dev 


node .\node modules\protractor\node modules\webdriver-manager update --ie --ie32 


以 下 为 命令 执行 后 的 package.json 文 件 ， 可 以 看 到 目前 的 测试 仅 对 protractor 包 有 依赖 。 
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在 phonecat-e2e 文 件 内 创建 两 个 子 文件 夹 page-objects 和 specs， 分 别 用 于 存放 封装 好 的 
页 面 对 象 和 测试 用 例 。 请 注意 ， 页 面 对 象 是 与 测试 无 关 的 独立 个 体 ， 可 以 供 多 个 测试 用 例 
共享 ， 在 实际 操作 中 ， 页 面 对 象 与 测试 用 例 经 常 由 不 同 的 开发 人 员 完 成 。 

接 下 来 创建 protractorlocalconfjs 并 配置 如 下 。 为 了 让 配置 代码 尽量 精简 ， 方 便 阅 读 ， 
当前 仅 使 用 了 基本 的 配置 ， 包 括 指定 Chrome 用 于 测试 ， 指 定 测试 用 例文 件 夹 为 specs， 指 
定单 元 测试 框架 为 Jasmine 等 。 
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framework: 'jasmine2', 
jasmineNodeOpts: { 


defaultTimeoutInterval: 30000 


图 13-4 为 当前 设置 好 的 目录 结构 。 


DA) protractor.local.confjs - phonecat-e2e - Visual Studio Code 
File Edit 





» OPEN EDITORS 


4 PHONECAT-EZE 


图 13-4 文件 结构 

接 下 来 开始 写 页 面 对 象 。 面 向 对 象 编程 的 一 个 重要 功能 是 通过 继承 ， 让 子 类 无 需 重复 
编写 代码 即 可 复 用 基 类 定义 好 的 属性 和 方法 。 作 为 页 面 ， 它 们 同样 共享 一 些 相 同 的 功能 ， 
例如 返回 到 Home 页 面 ， 返回 当 前 的 页 面 地 址 等 。 但 是 ，JavaScript 中 只 有 对 象 并 没有 类 的 
概念 ， 该 如 何 实现 类 似 的 继承 功能 用 于 定义 页 面 对 象 的 基 类 呢 ? 

JavaScript 是 一 种 基于 原型 的 语言 ， 与 传统 的 Java 和 C# 不 同 ， 它 的 核心 理念 是 使 用 原型 
对 象 作为 模板 来 创建 新 的 对 象 。 被 创建 的 新 对 象 不 但 拥有 自己 创建 时 定义 的 属性 ， 还 可 以 
享有 原型 对 象 的 属性 。 在 这 里 ， 可 以 把 页 面 对 象 的 基 类 理解 为 模板 对 象 ， 基 于 基 类 模板 对 
象 创 建 出 的 页 面 对 象 可 以 直接 访问 基 类 中 的 属性 。 

在 page-objects 文 件 夹 内 创建 base-page.js， 它 是 模板 基 类 对 象 ， 实 现 了 页 面 的 共享 属性 
和 方法 ， 代 码 如 下 : 





function BasePage(){ 


i 
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BasePage.prototype = Object.create({}, { 
absoluteUrl: {get: function () {return browser.getLocationAbsUrl();}}, 
goHome: {value: function () {browser.get('angular-phonecat/step-14/app');}} 
]) 


module.exports = BasePage; 


以 上 代码 中 通过 调用 Object.create 创 建 了 一 个 新 的 对 象 ， 该 对 象 包含 一 个 goHome 方 
法 用 于 返回 主页 面 ， 以 及 属性 absoluteUrl 用 于 获得 当前 的 页 面 地 址 。Object.create 提 出 于 
ECMAScript 5.1， 可 以 通过 第 1 个 参数 指定 新 对 象 的 模板 对 象 ， 在 本 代码 中 ，BasePage 的 
模板 对 象 为 一 个 空 对 象 。 

那么 最 后 一 名 又 是 什么 作用 了 呢 ? 别 忘 了 ，Protractor 的 测试 脚本 是 运行 在 Node.js 环 境 
中 的 。Node.js 通 过 实现 CommonJS 的 Modules/1.0 标 准 引入 了 模块 概念 ， 一 个 模块 可 以 通过 
module.exports 将 函数 或 变量 导出 。 在 以 上 代码 中 ，BasePage 被 导出 后 可 以 被 其 他 脚本 通过 
require 函 数 引 入 。 


Node.js 的 模块 加 载 于 2013 年 脱离 了 CommonJS 独 立 发 展 ?"， 但 仍然 遵循 相 


似 的 语法 。 





接 下 来 新 建 phone-list-page.js 文 件 ， 它 包含 类 PhoneListPage 的 实现 如 下 : 


var BasePage = require('./base-page.js'); 
function PhoneListPage () 
{ 
this.phoneList = element.all (by.repeater('phone in $ctrl.phones')); 
this.query = element (by.model('$ctrl.query')); 
this.queryField = element (by.model('$ctrl.query')); 
this.orderSelect = element (by.model('$ctrl.orderProp')); 
this.nameOption = this.orderSelect.element (by.css('option[value="name"] ')); 
this.phoneNameColumn = element.all (by.repeater('phone in $ctrl.phones').column('phone. 
name')); 


this.links = element.all (by.css('.phones li a')); 


QO Nodejs. Breaking the CommonJS standardization impasse[OL]. 2013. https://github.com/nodejs/node-vO. 
x-archive/issues/$132#issuecomment-15432598. 
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this.nameOption.click(); 


Ny 


module.exports = new PhoneListPage(); 


以 上 代码 首先 在 函数 PhoneListPage 中 ， 通 过 Protractor 元 素 定位 器 声明 了 页 面 中 各 个 元 
素 ， 包 括 手机 设备 列表 、 搜 索 关 键 字 文本 框 和 排序 下 拉 框 等 。 声 明了 这 些 页 面 元 素 后 ， 页 面 
对 象 的 其 他 部 分 代码 只 需 直接 引入 即 可 ， 不 需要 重复 使 用 元 素 定 位 器 。 如 果 后 期 需求 变更 发 
生 了 元 素 定位 的 变化 ， 也 只 需要 修改 PhoneListPage 函 数 即 可 ， 大 大 降低 了 脚本 的 维护 难度 。 

作为 页 面 对 象 ，Object.create 被 再 次 使 用 ， 这 次 BasePage 的 原型 对 象 被 作为 参数 传 入 
Object.create 中 ， 也 意味 着 PhoneListPage 的 基 类 是 BasePage， 它 可 以 直接 访问 BasePage 
中 定义 的 方法 与 属性 。 同 时 ，PhoneListPage 页 面 对 象 本 身 也 被 赋予 了 该 页 面 独 有 的 属性 
和 方法 ， 例 如 phonesCount 用 于 获得 当前 的 手机 设备 数量 ，setQueryField 用 于 设置 搜索 文 
本 框 等 。 

读者 可 能 会 奇怪 ， 既 然 所 有 被 使 用 的 元 素 都 已 经 通过 定位 器 在 PhoneListPage 函 数 中 
做 了 声明 ， 那 么 在 测试 脚本 里 直接 通过 声明 好 的 元 素 变量 进行 操作 就 行 了 ， 为 什么 还 要 再 
次 封装 函数 呢 ? 别 忘 了 关注 点 分 离 的 思想 。 页 面 对 象 模型 的 概念 不 仅仅 在 于 封装 ， 也 要 求 
测试 脚本 并 不 需要 了 解 页 面 内 的 技术 细节 就 可 以 基于 页 面 对 象 完成 测试 用 例 ， 只 有 这 样 ， 
页 面 对 象 和 测试 用 例 才能 充分 解 厢 ， 让 一 部 分 开发 人 员 能 够 专注 于 开发 页 面 对 象 ， 另 一 部 
分 开发 人 员 无 需 深 刻 了 解 Protractor 元 素 定位 器 也 能 进行 测试 用 例 的 开发 。 而 要 满足 以 上 这 
些 ， 必 要 条 件 就 是 页 面 里 的 所 有 功能 都 要 通过 属性 或 方法 进行 暴露 ， 测 试 脚本 无 需 直接 访 
问 页 面 元 素 。 

代码 的 最 后 一 行 ， 是 通过 module.exports 把 创建 好 的 PhoneListPage 对 象 导 出 ， 供 测试 
脚本 使 用 ， 也 就 是 接 下 来 要 创建 的 phone-listjs。 由 于 它 是 测试 用 例 ， 本 示例 将 其 放置 在 
specs 文 件 夹 下 。 以 下 为 具体 的 代码 : 


var listpage = require('../page-objects/phone-list-page.js'); 
describe('View: Phone list', function() { 
beforeEach (function() { 
listpage.goHome (); 
Ds; 


it('should redirect to /phones', function() { 
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可 以 看 到 ， 基 于 页 面 对 象 开发 的 测试 代码 简单 易 懂 ， 无 需 具体 了 解 页 面 内 的 实现 ， 即 
可 通过 调用 页 面 对 象 编写 脚本 。 例 如 在 以 下 测试 用 例 中 ， 可 以 很 容易 地 理解 :该 用 例 首先 
判断 出 页 面 中 的 手机 设备 个 数 为 20， 而 当 以 Dell 作 为 关键 字 进 行 搜索 时 ， 则 只 应 该 搜索 到 
2 个 手机 设备 ， 最 后 清除 搜索 关键 字 ， 再 次 返回 20 个 手机 设备 。 在 这 里 ， 开 发 人 员 既 不 用 
关心 如 何 找到 设备 列表 元 素 ， 也 不 需要 关心 如 何 找到 搜索 关键 字 元 素 ， 因 此 可 以 把 更 多 的 
精力 集中 到 具体 的 业务 逻辑 中 。 











it('should filter the phone list as a user types into the search box', function() { 
expect (listpage.phonesCount) .toBe (20); 
listpage.setQueryField('Dell'); 
expect (listpage.phonesCount) .toBe (2); 
listpage.clearQueryField(); 
expect (listpage.phonesCount) .toBe (20); 


]) 7 


在 该 网 站 中 ， 单 击 任何 一 个 手机 设备 会 进入 该 设备 的 具体 页 面 ， 以 下 分 别 为 对 应 的 页 
面 对 象 和 测试 用 例 的 代码 。 
页 面 对 象 : page-objects\phone-detail-page.js 


var BasePage = require('./base-page.js'); 
function PhoneDetailPage () 
此 
this.phoneName = element (by.binding('$ctrl.phone.name')); 
this .mainImage = element (by.css('img.phone.selected')); 
this .thumbnails = element.all(by.css('.phone-thumbs img'")) 
} 
PhoneDetailPage.prototype = Object.create(BasePage.prototype, { 
phoneNameText: {get: function () {return this.phoneName.getText ();}}, 
mainImageSrc: {get: function () {return this.mainImage.getAttribute('src');}}, 


clickThumbnail: {value: function (idx) {this.thumbnails.get (idx).click();}} 
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module.exports = new PhoneDetailPage(); 
测试 用 例 : specs\phone-detailLjs 


var detailpage = require('../page-objects/phone-detail-page.js'); 
var listpage = require('../page-objects/phone-list-page.js'); 
describe('View: Phone detail', function() { 
beforeEach (function() { 
listpage.goHome (); 
listpage.setQueryField('nexus-s'); 
listpage.clickLink(0); 
]) 
it('should display the “nexus-3”page'，function() { 
expect (detailpage.phoneNameText) .toBe('Nexus 5S'); 
Ds: 
it('should display the first phone image as the main phone image', function() { 
expect (detailpage.mainImageSrc) .toMatch(/img\/phones\/nexus-s.0.jpg/); 
Ds; 
it('should swap the main image when clicking on a thumbnail image', function() { 
detailpage.clickThumbnail (2); 
expect (detailpage.mainImageSrc) .toMatch(/img\/phones\/nexus-s.2.jpg/); 
detailpage.clickThumbnail (0); 
expect (detailpage.mainImageSrc) .toMatch(/img\/phones\/nexus-s.0.jpg/); 
Ds 


]) 


考虑 到 所 用 技巧 与 之 前 主页 类 似 ， 作 者 不 再 对 以 上 代码 逐一 解释 。 请 读者 注意 的 是 ， 
由 于 需要 先 访问 手机 列表 页 面 ， 选 择 了 手机 型 号 后 再 进入 具体 设备 页 面 ， 因 此 该 测试 用 
例 实际 上 对 两 个 页 面 对 象 都 有 依赖 ， 这 也 是 为 什么 在 该 测试 用 例 的 首 行 同 时 引用 了 phone- 
detail-page.js 和 phone-list-page:js 的 原因 。 对 于 实际 生产 环境 中 较 复杂 的 业务 逻辑 ， 多 页 面 
跳 转 是 很 常见 的 情况 ， 建 议 读者 参考 以 上 代码 进行 实施 。 
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13.1.3 ”页 面 对 象 最 佳 实践 


页 面 对 象 模型 的 实现 是 一 个 复杂 的 过 程 ， 对 开发 人 员 的 编程 能 力 要 求 较 高 。 读 者 在 实 
施 过 程 中 ， 建 议 基于 以 下 最 佳 实践 构建 自己 的 Protractor 自 动 化 测试 框架 : 

1. 一 个 页 面 对 应 一 个 或 多 个 页 面 对 象 

一 个 页 面 至 少 由 一 个 页 面 对 象 与 其 对 应 ， 一 对 一 的 抽象 关系 方便 测试 人 员 能 够 在 实际 
页 面 和 其 代码 实现 之 间 迅 速 切换 。 对 于 页 面 中 包含 的 复杂 元 素 ， 或 者 某 些 复合 控件 被 多 个 
页 面 引用 的 情况 ， 建 议 将 复杂 元 素 抽 象 为 一 个 独立 的 页 面 对 象 。 

2. 一 个 页 面 对 象 对 应 一 个 文件 

正如 C# 中 常 把 一 个 类 封装 到 一 个 .cs 文件 中 一 样 ， 每 一 个 页 面 对 象 应 该 实现 到 各 自 独 
立 的 js 文件 中 ， 从 而 保持 代码 结构 的 整齐 。 反 之 ， 如 果 一 个 文件 中 有 多 个 页 面 对 象 ， 测 试 
人 员 需 要 花费 更 多 的 精力 用 于 搜索 、 比 对 代码 ， 从 而 大 大 增加 维护 费用 。 

3. 在 文件 首 行 引用 其 他 页 面 对 象 

复杂 的 页 面 对 象 或 测试 用 例 往往 会 引用 到 多 个 页 面 对 象 。 有 些 开发 人 员 习 惯 于 按 实际 
的 业务 逻辑 ， 在 代码 执行 过 程 中 ， 当 需要 某 个 页 面 对 象 的 时 候 再 添加 引用 。 尽 管 在 技术 层 
面 上 这 样 做 没有 问题 ， 但 这 种 按 需 引用 的 方式 无 法 直观 地 体现 页 面 与 页 面 ， 或 者 测试 用 例 
与 页 面 之 间 的 依赖 关系 。 在 文件 首 行 即 添加 所 有 页 面 对 象 的 引用 ， 让 依赖 关系 一 目 了 然 ， 
可 以 有 效 提高 代码 的 可 读 性 ， 降 低 开发 人 员 的 学 习 难度 。 

4. 调用 页 面 对 象 暴露 的 方法 或 属性 而 不 是 元 素 

正如 上 一 节 示例 代码 所 示 ， 测 试 框架 中 底层 的 页 面 对 象 和 上 层 的 测试 用 例 往往 由 不 同 
的 开发 人 员 完成 。 高 效 的 敏捷 开发 要 求 开发 人 员 关注 业务 逻辑 而 无 需 关 心 页 面 内 每 个 元 素 
的 具体 类 型 和 支持 的 属性 和 方法 。 为 了 满足 这 个 要 求 ， 页 面 里 的 所 有 功能 都 应 该 通过 属性 
或 方法 进行 暴露 ， 而 测试 脚本 无 需 直接 访问 页 面 元 素 。 

5. 避免 在 页 面 对 象 中 使 用 断言 

页 面 对 象 是 对 业务 逻辑 的 抽象 和 封装 ， 是 对 页 面 操作 的 代码 体现 ， 而 这 与 测试 无 关 。 
如 果 将 测试 用 例 与 页 面 对 象 混为一谈 ， 在 页 面 对 象 中 进行 断言 ， 则 不 仅 会 让 页 面 对 象 的 实 
现 变 得 更 复杂 失去 纯粹 性 ， 测 试用 例 也 会 因为 分 散在 多 个 文件 中 的 断言 降低 了 可 读 性 和 可 
维护 性 。 

6. 合理 的 文件 结构 

保持 合理 的 文件 结构 的 目的 是 可 读 性 ， 那 什么 是 合理 的 文件 结构 呢 ? 它 应 该 符合 DRY 





第 13 章 “自动 化 测试 最 佳 实践 | 307 | 


(Don't Repeat Yourself?) 原则 ， 即 保证 开发 人 员 在 开发 和 维护 过 程 中 ， 可 以 迅速 找到 目 
标 文件 ， 而 不 需要 每 次 打开 项 目 后 再 次 寻找 。 原 始 的 代码 文件 、 单 元 测试 文件 和 自动 化 测 
试 文件 可 以 共同 存在 于 一 个 项 目 内 ， 但 它们 之 间 需 要 保持 独立 。 测 试 文件 的 结构 要 与 原始 代 
码 文件 的 结构 保持 一 致 ， 从 而 根据 相互 的 映射 关系 迅速 定位 文件 。 例 如 下 面 的 文件 结构 。 


1 -- app 
1 -- css 
jw 
1 全 5 
| -- html 
home.js 
profile.js 
contacts.html 
| -- unittest 
1 =/28 
| -- page-objects 
| -- home-page.js 
| -- profile-page.js 
| -- contacts-page.js 
1 -- specs 
| -- home-spec.js 
| -- profile-spec.js 


| -- contacts-spec.js 


13.2 ”数据 驱动 测试 


在 测试 领域 ， 数 据 驱 动 测试 是 指 测 试用 例 里 操作 的 数据 不 是 内 媒 在 测试 用 例 里 ， 而 


个 Bill Venners. Orthogonality and the DRY Principle[OL]. 2003. http://www.artima.com/intv/dry.html. 
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是 由 外 部 数据 源 提供 。 数 据 驱 动 测试 的 概念 并 不 为 自动 化 测试 所 独 有 ， 它 同样 适用 于 单元 
测试 。 同 时 ， 它 与 具体 使 用 什么 测试 框架 无 关 ， 无 论 是 Java 的 TestNG 还 是 JavaScript 里 的 
Jasmine 或 Cucumber， 只 要 从 事 测试 就 有 数据 驱动 的 需求 以 及 不 同 的 实施 方法 。 

为 什么 要 把 测试 数据 放 到 外 部 数据 源 ， 这 样 不 是 反而 降低 了 测试 用 例 的 可 读 性 吗 ? 设 
想 当 前 需要 测试 某 网 站 的 新 用 户 注册 流程 。 一 个 符合 设计 要 求 的 注册 模块 ， 会 对 用 户 名 进 
行 校 验 ， 例 如 用 户 名 内 需要 同时 包含 大 小 写 英文 字母 ， 需 要 包含 某 些 允许 的 特殊 字符 ， 用 
户 名 和 密码 不 能 相似 等 。 在 写 测试 用 例 的 时 候 ， 测 试 人 员 会 发 现 以 上 3 个 校 验 功能 存在 相 
互 影 响 因素 ， 为 了 避免 干涉 ， 需 要 用 多 个 不 同 的 测试 用 例 才能 全 面 覆 盖 这 些 校 验 点 。 而 另 
一 方面 ， 这 些 测试 用 例 的 操作 步骤 却 是 一 样 的 ， 都 是 输入 用 户 名 和 密码 ， 单 击 注册 按钮 ， 
唯一 不 同 的 就 是 用 于 测试 的 用 户 名 和 密码 不 同 。 测 试 人 员 当然 可 以 分 开 实现 这 些 测试 用 
例 ， 但 重复 代码 出 现 了 ， 这 不 符合 DRY 原 则 。 而 且 ， 如 果 该 注册 模块 的 功能 继续 加 强 ， 就 
只 能 继续 添加 更 多 的 测试 用 例 。 

为 了 解决 以 上 痛 点 ， 数 据 驱动 测试 理论 出 现 了 ， 它 的 核心 思想 是 数据 和 测试 代码 分 
离 ， 测 试用 例 只 规定 业务 逻辑 ， 所 有 的 输入 和 检验 值 由 外 部 数据 源 定义 ， 这 样 设计 并 不 会 
影响 执行 结果 ， 但 可 以 重用 测试 用 例 。 基 于 数据 驱动 搭建 的 自动 化 测试 框架 有 以 下 优点 : 

1. 充分 共享 数据 源 

同样 的 测试 数据 可 以 被 多 个 测试 用 例 使 用 ， 提 高 数据 利用 率 。 

2. 可 重复 性 

在 保持 测试 用 例 不 变 的 情况 下 ， 可 以 用 不 同 的 边界 数据 执行 多 次 测试 ， 提 高 测试 的 有 
效 性 。 

3. 数据 与 测试 代码 分 离 

基于 数据 驱动 的 测试 让 数据 与 测试 代码 解 厢 ， 让 开发 人 员 能 够 将 主要 精力 花费 在 业务 
流程 和 测试 用 例 本 身 ， 而 不 需要 考虑 到 各 种 输入 的 全 部 可 能 性 ， 提 高 代码 效率 。 

4. 灵活 添加 数据 

既然 开发 人 员 的 精力 在 测试 用 例 本 身 ， 那 谁 来 提供 这 么 多 的 外 部 数据 呢 ? 由 于 数据 已 
经 与 测试 代码 分 离 ， 任 何 测试 人 员 发 现 了 一 个 可 能 没有 被 覆盖 的 边界 条 件 时 ， 都 可 以 随时 
方便 地 更 新 数据 源 而 不 用 担心 其 是 否 会 影响 业务 逻辑 。 这 种 简化 的 工作 流程 保证 了 更 多 的 
有 效 测试 数据 ， 对 测试 质量 影响 深远 。 

根据 实际 情况 下 的 业务 各 有 不 同 ， 数 据 源 有 多 种 选择 ， 包 括 .xls、.xlsx、.csv 文 件 或 者 
数据 库 等 。 在 TestNG 中 可 以 使 用 DataProvider 声 明 资 源 内 媒 型 数据 ， 或 者 通过 读 文件 从 .csv 
获得 数据 。 
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本 书 的 Protractor 自 动 化 测试 是 基于 Jasmine 单 元 测试 框架 搭建 的 ， 是 否 有 对 应 的 读 
取 外 部 数据 源 的 方式 呢 ? 当然 有 ， 不 过 ， 由 于 Protractor 是 运行 在 Node.js 环 境 中 ， 使 用 任 
何 .xls、.csv 文 件 或 数据 库 的 外 部 数据 源 都 是 可 行 的 ， 但 在 JavaScript 环 境 下 ， 最 简便 也 是 
使 用 最 广泛 的 外 部 数据 源 是 JSON 文 件 ， 基 于 JSON 的 数据 无 需 任何 显 式 的 文件 读 取 或 连接 
即 可 直接 使 用 。 

现在 回顾 一 下 13.1.2 节 phone-listjs 中 的 如 下 测试 用 例 : 


it('should 





be possible to control phone order via the drop-down menu', function() { 


listpage.setQueryField('46'); 


expect 


(listpage.phoneListNames) .toEqual ([ 


?MOTOROLR ATRIX\u2122 46G', 


'T-Mobile myTouch 46°', 


'T-Mobile G62' 


a 


listpage.orderByName (); 


expect 


(listpage.phoneListNames) .toEqual([ 


"MOTOROLR ATRIX\u2122 4G', 


"T-Mobile G2°', 


'T-Mobile myTouch 46' 


]); 


Ds; 


该 测试 用 例 在 手机 设备 列表 页 面 使 用 关键 字 搜 索 后 ， 先 对 搜索 结果 进行 检查 ， 然 后 把 
搜索 结果 按 名 字 顺 序 重新 排序 并 再 次 检查 排序 结果 是 否 符 合 预期 。 该 测试 用 例 本 身 逻 辑 较 


为 简单 ,但 





因为 测试 数据 比较 多 ， 反 而 影响 了 测试 用 例 的 阅读 。 如 果 基 于 数据 驱动 ， 可 以 


按 如 下 方法 加 以 改进 。 
(1) 在 命令 控制 台 执行 以 下 命令 安装 jasmine-data-provider?， 这 是 一 个 Jasmine 的 插 
件 ， 可 以 把 数据 通过 回调 函数 传递 给 测试 用 例 。 





npm install jasmine-data-provider -save-dev 


@® MortalFlesh. Jasmine-data-provider[OL]. [2016]. https://github.com/MortalFlesh/jasmine-data-provider. 
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(2) 新 建文 件 夹 testdata， 创 建 外 部 数据 phone-list-data.json。 在 以 下 示例 代码 包括 两 
组 测试 数据 ， 分 别 以 4G 和 Samsung 作 为 flter 对 设备 进行 搜索 。 
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"Samsung Mesmerize\u2122 a Galaxy S\u2122 phone"， 
"Samsung Showcase\u2122 a Galaxy S\u2122 phone", 


"Samsung Transform\u2122™ 


(3) 在 specs\phone-list.js 文 件 里 分 别 添加 对 jasmine-data-provider 和 phone-list-data.jjson 
的 引用 ， 代 码 如 下 : 


var using = require('jasmine-data-provider'); 


var testdata = require('../testdata/phone-list-data.json'); 


(4) 修改 测试 用 例如 下 ， 使 得 通过 using 将 外 部 数据 作为 数组 传 入 jasmine-data- 
provider 后 ， 其 内 部 实现 会 遍历 每 一 组 数据 并 分 别 执行 测试 。 与 未 修改 前 的 测试 代码 相 
比 ， 以 数据 驱动 的 测试 用 例 更 整洁 ， 可 读 性 更 好 。 


using(testdata.controlphoneorder, function(inputdata){ 
it('should be possible to control phone order via the drop-down menu', function() { 
listpage.setQueryField (inputdata.filter); 
expect (listpage.phoneListNames) .toEqual (inputdata.sortbyage); 
listpage.orderByName (); 
expect (listpage.phoneListNames) .toEqual (inputdata.sortbyname); 
Ds; 


Ds; 


13.3 ”测试 报告 


在 自动 化 测试 中 ， 信 息 丰 富 和 多 样 化 的 测试 报告 是 非常 重要 的 一 环 。 简 言 之 ， 测 试 报 
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告 就 是 把 测试 的 过 程 和 结果 生成 文档 ， 既 可 以 传递 给 持续 的 集成 环境 ， 也 可 以 供 开发 测试 
人 员 复 查 ， 对 发 现 的 问题 和 缺陷 进行 分 析 。 测 试 报告 为 纠正 软件 的 质量 问题 提供 了 坚实 的 
数据 依据 ， 同 时 能 够 为 软件 验收 和 交付 打下 良好 基础 ， 是 测试 行为 中 不 可 或 缺 的 一 部 分 。 
Protractor 本 身 只 生成 基本 的 测试 报告 缺乏 可 定制 性 ， 需 要 使 用 插件 满足 多 样 化 的 测试 报 
告 需求 。 


13.3.1 控制 台 报告 


通过 jasmine-spec-reporter@ 插 件 ， 可 以 在 控制 台 内 生成 丰富 的 测试 报告 ， 基 于 不 同 的 
颜色 和 符号 标注 出 不 同 的 测试 结果 ， 适 合 测试 人 员 在 脚本 开发 阶段 ， 实 时 通过 控制 台 报 告 
检查 测试 的 运行 情况 。 

(1) 在 命令 控制 台 执行 以 下 命令 安装 插件 。 


npm install jasmine-spec-reporter --save-dev 


(2) 修改 protractor 配 置 文件 ， 添 加 以 下 代码 指定 生成 控制 台 报 告 。 


onPrepare: function() { 
Var SpecReporter = require('jasmine-spec-reporter'); 
jasmine.getEnv() .addReporter (new SpecReporter()); 


} 





环境 ， 这 是 Protractor 中 常用 的 技巧 。 类 似 的 回调 函数 还 有 OnComplete 和 


中 onPrepare 在 执行 测试 用 例 之 前 被 调用 ， 可 以 用 于 定制 和 初始 化 测试 
onCleanUp， 分 别 在 测试 用 例 执 行 结束 以 及 WebDriver 对 象 关 闭 后 被 调用 。 





(3) 运行 测试 用 例 ， 以 下 为 生成 的 控制 台 报告 ， 默 认 成 功 执 行 的 测试 用 例会 以 绿色 
及 对 勾 符 号 ( V ) 进行 标注 。 控 制 台 报告 有 良好 的 定制 性 ， 请 参考 网 址 https://github.com/ 
bcaudan/jasmine-spec-reporter 修 改 默 认 配 置 。 


@® Bastien Caudan. Jasmine-spec-reporter[OL]. [2016]. https://github.com/bcaudan/jasmine-spec-reporter. 
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图 13-5 ”控制 台 报 告 


13.3.2 JUnit 报 告 


JUnit2 是 一 种 基于 XML 的 报告 格式 ， 被 广泛 应 用 于 各 持续 集成 系统 内 。 可 以 通过 揪 
件 jasmine-reporters2 为 Protractor 添 加 JUnit 报 告 功能 ， 同 时 该 插件 还 支持 NUnit 等 其 他 报告 
格式 。 
(1) 在 命令 控制 台 执 行 以 下 命令 安装 插件 。 


npm install jasmine-reporters --save-dev 


(2) 修改 protractor 配 置 文件 ， 添 加 以 下 代码 指定 生成 JUnit 测 试 报告 ，savePath 用 于 
指定 报告 的 保存 位 置 。 


onPrepare: function() { 
var jasmineReporters = require('jasmine-reporters'); 
jasmine.getEnv() .addReporter (new jasmineReporters.JUnitXmlReporter({ 
consolidateAll: true, 


savePath: 'testresults', 


QO Windy Road Technology. JUnit-Schema[OL]. [2016]. https://github.com/windyroad/JUnit-Schema/blob/ 
master/JUnit.xsd. 
© Larry Myers. Jasmine-reporters[OL]. [2016]. https://github.com/larrymyers/jasmine-reporters. 
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filePrefix: 'xmloutput" 


nD))s; 











(3) 运行 测试 用 例 。 以 下 为 生成 的 示例 报告 。 





<?xml version="1.0" encoding="UTF-8" ?> 

<testsuites> 

<testsuite name="View: Phone detail" timestamp="2016-11-28T11:55:15" hostname="localhost" 
time="14.344" errors="0" tests="3" skipped="0" disabled="0" failures="0"> 

<testcase classname="View: Phone detail" name="should display the ‘nexus-s. page" 
time="6.851" /> 

<testcase classname="View: Phone detail" name="should display the first phone image as 
the main phone image" time="3.704" /> 

<testcase classname="View: Phone detail" name="should swap the main image when clicking 
on a thumbnail image" time="3.788" /> 

</testsuite> 

<testsuite name="View: Phone list" timestamp="2016-11-28T11:55:29" hostname="localhost" 
time="9.492" errors="0" tests="4" skipped="0" disabled="0" failures="0"> 

<testcase classname="View: Phone list" name="should redirect to /phones" time="1.014" /> 
<testcase classname="View: Phone list" name="should filter the phone list as a user types 
into the search box" time="2.53" /> 

<testcase classname="View: Phone list" name="should be possible to control phone order 
via the drop-down menu" time="2.499" /> 

<testcase classname="View: Phone list" name="should render phone specific links" 
time="3.448" /> 

</testsuite> 


</testsuites> 





jasmine-reporters 功 能 强大 ， 关 于 它 的 其 他 配置 属性 ， 请 参考 网 址 https://github.com/ 
larrymyers/jasmine-reporters 中 所 述 。 本 书 将 在 第 16 章 介绍 如 何 把 JUnit 测 试 报告 集成 到 持续 
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集成 环境 内 。 


13.3.3 ”HTML 报告 


基于 XML 的 JUnit 报 告 适合 于 持续 集成 系统 ， 但 缺乏 多 样 化 的 颜色 与 格式 对 测试 结果 
进行 区 分 与 标注 ， 所 以 不 适合 直接 阅读 。 为 了 提供 用 户 更 好 的 报告 体验 形式 ， 可 以 通过 插 
件 protractor-j asmine2-html-reporter 为 Protractor 添 加 HTML 报 告 功能 。 

(1) 在 命令 控制 台 执行 以 下 命令 安装 插件 。 


npm install protractor-jasmine2-html-reporter --save-dev 














(2) 修改 Protractor 配 置 文件 ， 添 加 以 下 代码 指定 生成 HTML 测 试 报告 ，savePath| 
于 指定 HTML 文件 的 保存 路 径 。 该 插件 同时 支持 为 每 个 测试 用 例 或 失败 的 用 例 生成 截图 ， 
screenshotsFolder 属 性 用 于 指定 截图 的 保存 路 径 。 





onPrepare: function() { 
var jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter'); 
jasmine.getEnv() .addReporter( 
new jasmine2HtmlReporter ({ 

savePath: ',/htmlreports/', 
screenshotsFolder: 'images', 
takeScreenshots: true, 
cleanDestination: true 


}) 


(3) 运行 测试 用 例 。 以 下 为 生成 的 示例 报告 。 关 于 protractor-jasmine2-html-reporter 的 
其 他 配置 属性 ， 请 参考 网 址 https://github.com/Kenzitron/protractor-jasmine2-html-reporter 中 
所 述 。 本 书 将 在 第 16 章 介绍 如 何 将 HTML 报告 集成 到 持续 集成 环境 的 方法 。 


个 ”Kenzitron. protractor-jasmine2-html-reporter[OL]. [2016]. https://github.com/Kenzitron/protractor- 
jasmine2-html-reporter 
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View: Phone list - 9.738s 





Tests: 4 Skipped:0 Failures:0 
should redirect to /phones - 1.049s 


» Passed. 


Tests passed: 100.00% 
| 


should filter the phone list as a user types into 


电 
the search box - 2.634s 站 
。Passed，V 和 
。Passed，V = 
Vi Tests passed: 100.00% 
| 
should be possible to control phone order via the 和 
drop-down menu - 2.48s a 
a 
» Passed. 
»Passed. / 


图 13-6 ”HTML 报告 


13.4 性 能 测试 


过 去 ， 对 于 软件 服务 ， 各 厂商 首先 关心 的 往往 是 软件 实现 的 功能 多 不 多 ， 却 容易 忽略 
软件 性 能 对 产品 的 影响 。 

近 几 年 ， 软 件 服务 特别 是 Web 应 用 在 性 能 方面 得 到 了 越 来 越 多 的 重视 ， 各 厂商 意识 到 
在 功能 同 质 化 的 情况 下 ， 更 优越 的 性 能 已 经 成 为 客户 选择 的 重要 指标 。Stack Overflow 的 
联合 创始 人 Jeff Atwood 曾 提出 Performance is a Feature 的 论点 ， 把 性 能 指标 提高 到 了 与 功能 
一 样 重要 的 层次 ?。 

当前 ， 性 能 测试 已 经 成 为 产品 研发 中 必 不 可 少 的 一 环 。 通 过 性 能 测试 可 以 : 

@ 了 解 产 品 的 性 能 情况 ， 检 验 产品 性 能 是 否 满足 业务 需求 。 

@ 量化 并 找 出 产品 的 性 能 瓶颈 ， 为 进一步 优化 提供 数据 。 

@ 量化 性 能 指标 ， 为 销售 人 员 提 供 性 能 方面 的 建议 。 

性 能 测试 本 身 是 一 个 信息 收集 和 分 析 的 过 程 ， 它 与 当前 测试 环境 以 及 操作 速度 有 很 大 
关系 ， 如 果 使 用 手工 测试 往往 无 法 保证 操作 的 协调 性 ， 因 而 难以 收集 到 可 靠 的 性 能 测试 结 
果 。 在 基于 Protractor 的 自动 化 测试 中 ， 结 合 插件 protractor-per 促 则 可 以 自动 收集 浏览 器 的 


人 Jeff Atwood. Performance is a Feature[OL]. 2011. https://blog.codinghorror.com/performance-is-a-feature/. 
@ Parashuram N. protractor-perf[OL]. [2016]. https://github.com/axemclion/protractor-perf. 
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性 能 指标 ， 避 免 人 工 测试 中 的 种 种 浆 端 。 
(1) 插件 protractor-perf 依 赖 于 某 些 原生 模块 ， 需 要 node-gyp 进 行 编译 o>， 环境 要 求 
包括 : 
@ 安装 Visual C++ Build Tools 或 者 Visual Studio 2015。 
@ 从 网 址 https://www.python.org/downloads/ 处 下 载 并 安装 Python 2.7 (当前 最 新 的 
node-gyp 不 支持 V3.X.x 版 本 的 Python) 。 
(2) 在 命令 控制 台 执行 以 下 命令 安装 protractor-perf 插 件 。 


npm install protractor-perf -save-dev 


npm install protractor-perf -9 


(3) 在 测试 用 例 中 通过 PerfRunner 对 象 对 性 能 测试 的 启动 和 结束 进行 控制 ， 调 用 
getStats 并 传 入 对 应 的 性 能 指标 名 称 获得 收集 到 的 性 能 数据 。 
以 下 为 specs/perf/phone-listjs 文 件 的 示例 代码 : 


var listpage = require('../../page-objects/phone-list-page.js'); 
Var PerfRunner = require('protractor-perf');} 
describe('Performance: Phone list', function() { 
Var perfRunner = new PerfRunner(protractor, browser); 
beforeEach (function() { 
listpage.goHome(); 
Ds 
it('meanFrametime in query', function() { 
perfRunner.start (); 
listpage.setQueryField('LG'); 
perfRunner.stop(); 
//perfRunner.printstats (); 
// call this function to get the baseline 
expect (perfRunner.getStats('meanFrameTime')) .toBeLessThan (20); 
Ds 


Ds 


© Nodejs. node-gyp[OL]. [2016]. https://github.com/nodejs/node-gyp. 
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插件 protractor-perf 基 于 browser-perf? 所 构建 ， 可 以 记录 浏览 器 的 时 间 轴 指标 以 及 事件 
触发 的 事件 点 ， 如 图 13-7 所 示 。 请 参考 网 址 https://github.com/axemclion/browser-perf/wiki/ 
Metrics 以 获取 所 有 的 性 能 指标 说 明 。 


navigationStart 
TedirectStart 


TedirectEnd 
fetchStart. 
domainLookupStart 
domainLookupEnd 
connectStart 
(secureConnectionStart) 
connectEnd 


requestStart 
responseStart 
responseEnd 

DNS | TCP | Request | Response Processing = 
oadEventEnd 
loadEventStart 
domComplete 
mContentLoaded 

domInteractive 


domLoading 
unloadEnd 
unloadStart 








Prompt 
for 
unload 












































图 13-7 时 间 轴 事件 

(4) 以 下 为 性 能 测试 配置 文件 protractor-perfjs 的 示例 代码 ， 与 Protractor 配 置 文件 格 
式 和 所 支持 的 参数 一 致 。 

单独 设置 一 个 性 能 测试 配置 文件 的 原因 是 ， 性 能 测试 往往 通过 处 理 较 大 的 数据 量 来 暴 
露 产品 的 性 能 问题 ， 而 这 在 普通 的 页 面 测试 中 不 是 必须 的 ， 甚 至 会 影响 到 普通 页 面 测试 的 
完成 效率 。 所 以 ， 在 性 能 测试 最 佳 实践 中 ， 建 议 同一 个 测试 用 例 里 不 要 同时 覆盖 普通 的 页 
面 测 试 和 性 能 测试 ， 而 是 建立 专门 的 性 能 测试 用 例 。 在 以 下 配置 文件 中 ， 对 应 的 性 能 测试 
用 例 集合 被 命名 为 perf， 定 义 在 配置 属性 suites 中 。 


exports.config = { 
selenium: 'http://localhost:4445/wd/hub', 
seleniumPort: 4445, // Port matches the port above 


suites:{ 


@® Parashuram N. browser-perf[OL]. [2016]. https://github.com/axemclion/browser-perf. 
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perf: 'specs/perf/*.js' 

]， 
capabilities: { 

"browserName' : "chrome'" 
} 
baseUr1: 'http://angular.github.io/', 
framework: 'jasmine2', 
jasmineNodeOpts: { 


defaultTimeoutInterval: 30000 


(5) 在 命令 控制 台 调 用 以 下 命令 执行 性 能 测试 ， 参 数 是 性 能 测试 集合 所 对 应 的 名 字 。 


protractor-perf perf.conf.js --suite perf 


如 果 在 测试 中 出 现 错误 信息 “ConfigParser is not a constructor error”， 请 


根据 网 址 https://github.com/afterbangx/protractor-perf/commit/e58d478abc8eb641a 
c06b1745d73746cb561bfd0 中 的 信息 修改 lib/clijs 文 件 。 





13.5 图像 匹配 


基于 Protractor 提 供 的 元 素 定 位 器 ， 可 以 很 容易 地 检查 出 页 面 元 素 是 否 存在 、 数 量 是 否 
正确 ， 以 及 DOM 结 构 是 否 符合 设计 等 问题 。 但 如 果 要 检查 页 面 的 布局 ， 包 括 图 片 是 否 发 
生 了 拉 伸 、 文 本 框 之 间 是 否 发 生 了 重叠 却 难度 较 大 。 

特别 是 当前 Web 前 端 流行 的 是 响应 式 设计 ， 一 个 成 熟 的 网 站 往往 能 够 根据 设备 环境 
(操作 系统 、 屏 幕 尺 寸 和 分 辩 率 等 自动 调 整 页 面 布局 。 针 对 这 种 情况 ， 如 果 在 脚本 里 进 
行 布局 检查 ， 获 取 每 个 元 素 的 位 置 及 之 间 的 层 欠 关系 会 使 脚本 变 得 复杂 而 难以 维护 ， 这 不 
仅 需 花费 大 量 的 人 力 物力 ， 而 且 最 后 也 很 难 成 功 。 

针对 这 样 的 需求 ， 推 荐 的 方式 是 对 页 面 截屏 ， 基 于 基准 图 片 进行 实时 的 图 像 匹 配 。 在 
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Protractor 框 架 下 可 以 通过 插件 pix-di 伯 了 实现。pix-diff 依 赖 于 另 一 个 模块 blink-diff 构建 ， 
进行 图 像 比 较 ， 具 体 步骤 如 下 。 
(1) 在 命令 控制 台 执行 以 下 命令 安装 插件 。 


npm install -save-dev pix-diff 


(2) 修改 protractor 配 置 文 件 ， 添 加 以 下 代码 启用 并 设置 插件 。 


onPrepare: function() { 
var PixDiff = require('pix-diff'); 
browser.pixDiff = new PixDiff({ 
basePath: ',./screenshots/', 
baseline: true, 
diffPath: './screenshots/', 


formatImageName: '{tag}-{browserName}-{width}x{height}-dpr-{dpr}' 


创建 PixDiff 对 象 的 时 候 ， 可 以 通过 参数 对 其 进行 配置 。 其 中 basePath 指 定 基准 图 片 的 
保存 位 置 ，diffPath 对 应 的 文件 夹 用 于 指定 图 片 比 对 后 的 差异 结果 。 
建议 在 创建 PixDiff 对 象 的 时 候 ， 设 置 baseline 为 tue， 这 样 当 第 一 次 运行 测 
试用 例 还 没有 基准 文件 时 ， 测 试用 例会 自动 保存 截屏 作为 基准 文件 。 保 存 的 
图 片 名 可 以 通过 formatImageName 进 行 任意 定制 。 
(3) 在 测试 用 例 中 ， 通 过 调用 pix-diff 方 法 checkScreen 或 checkRegion 可 以 分 别 对 浏览 
器 或 者 某 个 元 素 区 域 进行 匹配 。 
以 下 为 可 能 返回 的 比 对 结果 ， 其 中 RESULT_SIMILAR 和 RESULT_IDENTICAL 表 示 图 
像 相似 或 一 致 。 由 于 图 像 是 通过 截屏 获取 到 的 ， 考 虑 到 图 像 的 像素 质量 和 比 对 效果 ， 建 议 
同时 使 用 RESULT_SIMILAR 和 RESULT_IDENTICAL 表 示 匹 配 成 功 。 
@ RESULT UNKNOWN 








QO koola. pix-diff[OL]. [2016]. https://github.conmy/koola/pix-dif. 
@ yahoo. Blink-diff[OL]. [2016]. https://github.com/yahoo/blink-diff. 
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Protractor 框 架 下 可 以 通过 插件 pix-di 伯 了 实现。pix-diff 依 赖 于 另 一 个 模块 blink-diff 构建 ， 
进行 图 像 比 较 ， 具 体 步骤 如 下 。 
(1) 在 命令 控制 台 执行 以 下 命令 安装 插件 。 


npm install -save-dev pix-diff 


(2) 修改 protractor 配 置 文 件 ， 添 加 以 下 代码 启用 并 设置 插件 。 


onPrepare: function() { 
var PixDiff = require('pix-diff'); 
browser.pixDiff = new PixDiff({ 
basePath: ',./screenshots/', 
baseline: true, 
diffPath: './screenshots/', 


formatImageName: '{tag}-{browserName}-{width}x{height}-dpr-{dpr}' 


创建 PixDiff 对 象 的 时 候 ， 可 以 通过 参数 对 其 进行 配置 。 其 中 basePath 指 定 基准 图 片 的 
保存 位 置 ，diffPath 对 应 的 文件 夹 用 于 指定 图 片 比 对 后 的 差异 结果 。 
建议 在 创建 PixDiff 对 象 的 时 候 ， 设 置 baseline 为 tue， 这 样 当 第 一 次 运行 测 
试用 例 还 没有 基准 文件 时 ， 测 试用 例会 自动 保存 截屏 作为 基准 文件 。 保 存 的 
图 片 名 可 以 通过 formatImageName 进 行 任意 定制 。 
(3) 在 测试 用 例 中 ， 通 过 调用 pix-diff 方 法 checkScreen 或 checkRegion 可 以 分 别 对 浏览 
器 或 者 某 个 元 素 区 域 进行 匹配 。 
以 下 为 可 能 返回 的 比 对 结果 ， 其 中 RESULT_SIMILAR 和 RESULT_IDENTICAL 表 示 图 
像 相似 或 一 致 。 由 于 图 像 是 通过 截屏 获取 到 的 ， 考 虑 到 图 像 的 像素 质量 和 比 对 效果 ， 建 议 
同时 使 用 RESULT_SIMILAR 和 RESULT_IDENTICAL 表 示 匹 配 成 功 。 
@ RESULT UNKNOWN 








QO koola. pix-diff[OL]. [2016]. https://github.conmy/koola/pix-dif. 
@ yahoo. Blink-diff[OL]. [2016]. https://github.com/yahoo/blink-diff. 
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@ RESULT DIFFERENT 
@ RESULT SIMILAR 

@ RESULT IDENTICAL 
以 下 为 测试 用 例 的 示例 代码 。 


var listpage = require('../page-objects/phone-list-page.js'); 
var BlinkDiff = require('blink-diff'); 
describe('View: Phone list', function() { 
beforeEach (function() { 
listpage.goHome(); 
Ds; 
it('demo checkScreen', function() { 
listpage.setQueryField('46') 
‘then(() => browser.pixDiff.checkScreen('demo-checkScreen')) 
.then(result => expect( (result.code === BlinkDiff.RESULT IDENTICAL) || 


(result.code === BlinkDiff.RESULT SIMILAR) ) .toBeTruthy() ); 


(4) 在 比 对 的 时 候 可 以 通过 thresholdType 指 定 匹配 方式 ， 通 过 threshold 指 定 匹配 阔 
值 。 例 如 BlinkDiff.THRESHOLD_PIXEL 表 示 基 于 像素 进行 匹配 ，BlinkDiff.THRESHOLD_ 
PERCENT 表 示 基 于 百分比 进行 匹配 ，BlinkDiff 默 认 基于 像素 进行 比较 。 


it('demo threshold', function() { 
listpage.orderByName () 
.then(() => browser.pixDiff.checkScreen('demo-threshold' 
{thresholdType: BlinkDiff.THRESHOLD_PERCENT，threshold: 0.2})) 
.then (result => expect( (result.code === BlinkDiff.RESULT IDENTICAL) || 
(result.code === BlinkDiff.RESULT SIMILAR) ).toBeTruthy() ); 


]) 


BlinkDiff 支 持 丰富 的 参数 设置 ， 包 括 是 否 启 用 调试 模式 等 ， 可 以 参考 https://github. 
com/yahoo/blink-diff 获 取 更 多 选项 的 详细 说 明 。 
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13.6 ”任务 自动 化 


与 单元 测试 一 样 ， 在 最 佳 实践 中 同样 建议 把 自动 化 测试 与 任务 工具 集成 起 来 ， 这 样 可 
以 通过 配置 文件 设置 任务 的 依赖 关系 与 实施 细节 ， 从 而 简化 任务 流程 。 


13.6.1 与 gulp 集 成 


本 节 基 于 插件 gulp-protractor? 介 绍 如 何 通过 任务 构建 工具 gulp 驱 动 Protractor 自 动 化 测 
试 ， 关 于 gulp 的 详细 使 用 说 明 请 参考 第 5 章 的 相关 内 容 。 
(1) 在 命令 控制 台 执 行 以 下 命令 安装 插件 。 


npm install -save-dev gulp-protractor 


(2) 修改 Protractor 配 置 文件 ， 基 于 测试 用 例 的 种 类 与 用 途 ， 通 过 suites 字 段 对 测试 用 
例 进行 分 类 。 
protractor.local.confjs 示 例 代 码 如 下 : 





exports.config = { 
directConnect: true, 
suites: { 
smoke: 'specs/phone-list.js', 
full;: "specs/*.js" 
}, 
capabilities: { 
'browserName': "chrome" 
Ye 
baseUrl: ‘http://angular.github.io/', 


framework: "jasmine2" 


@® Miller & Sohn Digitalmanufaktur GmbH. gulp-protractor[OL]. [2016]. https://github.com/mllrsohn/gulp- 
protractor. 
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以 上 配置 指定 了 两 个 测试 suites， 分 别 是 冒 烟 测试 和 完整 测试 ， 它 们 对 应 于 不 同 的 测 
试用 例 范 围 。 

(3) 添加 Gulpfile js 文件 ， 设 置 两 个 任务 e2e-smoke 和 e2e-full， 分 别 用 于 执行 冒 烟 测试 
和 完整 测试 。 












































var gulp = require('gulp'); 
Var gp = require('gulp-protractor'); 
// Setting up the smoke test task 
gulp.task('e2e-smoke', [], function(cb) { 
gulp.src([]).pipe(gp.protractor ({ 
configFile: 'protractor.local.conf.js', 
args: ['--suite', 'smoke'] 
})).on('error', function(e) { 
console.1og(e) 
}).on('end', cb); 
7); 
// Setting up the full test task 
gulp.task('e2e-full', [], function(cb) { 
gulp.src([]).pipe(gp.protractor({ 
configFile: 'protractor.local.conf.js'v 
args: ['--suite', 'full'] 
})).on('error', function(e) { 
console.log(e) 
}) .on('end', cb); 


1D)s; 


在 以 上 示例 代码 中 ， 任 务 构建 通过 管道 设置 Protractor 启 动 选项 ， 其 中 configFile 用 于 设 
置 配置 文件 。args 用 于 设置 所 需 参数 ， 支 持 所 有 protractor 的 命令 行 参数 。 

(4) 在 命令 控制 台 执行 以 下 命令 ， 分 别 进行 冒 烟 测试 和 完整 测试 〈 确 保 已 经 下 载 浏 
览 器 驱动 ) 。 
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(5) 自动 化 测试 依赖 于 浏览 器 驱动 和 Selenium Server， 通 过 任务 构建 可 以 在 启动 测试 
用 例 前 自动 更 新 浏览 器 驱动 ， 从 而 避免 手工 干预 。 示 例 代码 如 下 : 
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以 上 示例 代码 添加 了 一 个 新 任务 webdriver update， 并 将 其 添加 到 另外 两 个 任务 的 依 
赖 中 。 这 样 ， 当 开始 执行 测试 用 例 的 时 候 ，gulp 会 发 现 webdriver_ update 是 一 个 被 依赖 的 任 
务 ， 需 要 先 执行 。 

以 上 代码 的 最 后 一 行将 完整 测试 设置 为 默认 任务 ， 这 样 在 命令 控制 台 执行 命令 gulp 即 
可 直接 运行 完整 测试 。 


13.6.2 npm 脚 本 


除了 读者 已 经 熟知 的 gulp 和 Grunt，npm 人 允许 在 package.json 文 件 内 使 用 scripts 字 段 定义 
脚本 命令 2?， 执 行 命令 nhpm run 会 新 建 一 个 Shell 并 在 这 个 Shell 里 执行 指定 的 脚本 命令 ， 从 
而 也 可 以 作为 构建 工具 使 用 。 注 意 ，npm run 命 令 新 建 的 这 个 Shell， 会 在 当前 目录 的 node_ 
modules/.bin 子 目录 中 加 入 PATH 环境 变量 ， 执 行 结束 后 ， 再 将 PATH 变量 恢复 。 这 也 意味 
着 ， 当 前 目录 内 的 node_modules/.bin 子 目录 里 的 所 有 脚本 ， 都 可 以 直接 用 脚本 名 调用 ， 而 
不 必 人 额外 添加 路 径 29。 与 gulp 和 Grunt 比 较 而 言 ，npm 可 以 不 依赖 于 任何 额外 的 构建 插件 ， 
对 调用 CLI 或 者 Shell 脚 本 提供 了 原生 支持 。 当 然 ， 在 实际 使 用 中 ， 读 者 既 可 以 使 用 npm 直 
接 构建 任务 ， 也 可 以 通过 调用 gulp 或 Grunt 完 成 相同 的 功能 。 

表 13-1 是 npm 已 经 预定 义 好 的 常用 任务 ， 完 整 的 任务 列表 请 参考 网 址 https://docs. 
npmjs.com/misc/scripts 中 所 述 。 以 任务 test 为 例 ， 用 户 仍然 可 以 通过 执行 hpm run test 命 令 来 
运行 ， 但 作为 预定 义 任务 ， 也 可 以 直接 通过 调用 npm test 来 运行 。 

表 13-1 npm 预 定义 任务 
下 


Pretest, test posttest 调用 npm test 后 按 序 执行 ， 定 义 测试 相关 的 任务 
| meestart start poststart 调用 npm start 后 按 序 执行 ， 定 义 启动 相关 的 任务 | 
以 下 package.json 示 例 代码 定义 了 两 个 任务 test 和 e2e-smoke， 均 通过 调用 gulp 启 动 自动 
化 测试 。 其 中 test 是 预定 义 任务 ，e2e-smoke 是 自 定义 任务 。 











{ 


"name": "phonecat-e2e"， 


©® npm. npm-scripts[OL]. [2016]. https://docs.npmjs.com/misc/scripts. 
© KeithCirkel. How to use npm asa Build Tool[OL]. 2014. https://www.keithcirkel.co.uk/how-to-use-npm-as- 
a-build-tool/. 
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WA 亿 下 和 人 > 





"description 








"index.js", 
mscripts"; { 
ntest"s "gulp™, 


"e2e-smoke": "gulp e2e-smoke" 





"license": "ISC", 
"devDependencies": { 


"gulp": "3.9.1", 





"gulp-protractor": "^3.0.0", 





"protractor wt lh 





命令 控制 台 执行 以 下 命令 即 可 启动 任务 ， 如 图 13-8 所 示 。 





npm test 


npm run e2e-smoke 





EE Administrator Command Prompt 


C:\phonecat >npm test 


eB1.0.0 test 


chronedriver: file exi 
nodules\webdriver-nanager\seleniun\chronedr 
update — chronedriver ipping chrome' 
update — chronedriv, 25 up to d 
update ium stane 全 x 


I/update 


I/update 
d 


@ 
chro' 








13-8 npm 驱 动 测试 


第 14 音 
分 布 式 目 动 化 测试 
4 


尽管 Protractor 可 以 通过 Selenium Server 远 程 执行 测试 脚本 ， 但 一 个 Selenium Server 无 
法 同时 支持 多 种 异 构 的 测试 环境 ， 例 如 Windows 上 的 正和 Linux 上 的 Chrome， 也 无 法 兼顾 
浏览 器 的 多 种 版 本 。 另 外 ， 随 着 测试 用 例 的 不 断 累 积 ， 每 次 测试 所 需 的 时 间 也 会 越 来 越 
长 ， 当 用 例 数量 达到 一 定数 量 级 后 会 直接 影响 到 测试 性 能 。 所 以 ， 在 大 型 应 用 的 开发 环境 
内 ， 需 要 一 种 能 够 兼顾 多 种 异 构 环境 、 多 个 测试 用 例 可 以 并 发 执行 的 分 布 式 测试 平台 。 

本 章 将 介绍 : 

@ 分 布 式 测试 概述 

@ 基于 Selenium Grid 的 分 布 式 测试 

@ 基于 云 计算 的 分 布 式 测试 

@ 配置 共享 


14.1 分 布 式 测试 概述 


分 布 式 测试 在 局 域 网 内 或 通过 互联 网 ， 把 分 布 于 不 同 地 点 、 能 够 独立 完成 测试 功能 的 
计算 机 资源 连接 起 来 ， 从 而 达到 共享 计算 资源 、 分 散 操作 、 集 中 管理 和 统一 调度 的 效果 。 
与 单机 模式 比较 ， 分 布 式 测试 有 以 下 优点 : 

1. 互通 性 

多 个 测试 节点 之 间 的 互 连 互通 实现 了 局 域 网 或 互联 网 内 的 资源 共享 ， 是 分 布 式 测试 系 
统 的 底层 支撑 结构 。 

2. 操作 系统 无 关 性 

成 熟 的 分 布 式 测试 平台 需要 兼容 多 种 异 构 环 境 ， 无 论 是 Windows、Linux 还 是 Mac OS 
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都 可 以 无 颖 集成 。 

3. 可 伸缩 性 

当 计 算 资源 不 够 或 需要 新 的 异 构 测试 环境 时 ， 可 以 方便 地 将 新 的 计算 资源 加 入 到 已 有 
的 测试 平台 内 ， 而 无 需 重 新 搭建 完整 的 测试 环境 。 

4. 并 发 性 

分 布 式 测试 系统 本 质 上 是 一 个 实时 系统 ， 基 于 统一 调度 的 任务 分 发 机 制 保证 测试 任务 
能 够 根据 环境 要 求 ， 实 时 分 发 到 合适 的 计算 节点 并 发 执行 。 

5. 容错 性 

分 布 式 测试 的 计算 节点 互 不 影响 ， 任 何 出 问题 的 节点 不 会 影响 其 他 节点 的 操作 及 整个 
测试 平台 的 运行 。 

对 分 布 式 测试 平台 而 言 ， 核 心 是 流程 控制 ， 即 系统 需要 实时 调度 计算 资源 并 能 够 方便 
地 监视 和 操纵 测试 过 程 。 因 此 ， 分 布 式 测试 系统 一 般 采 用 集中 管理 的 分 布 式 策略 ， 即 由 一 
台中 心计 算 机 控制 若干 台 受 控 计算 机 的 执行 。 整 个 测试 过 程 和 资源 管理 由 中 心计 算 机 来 完 
成 ， 它 掌握 整个 测试 环境 的 状态 ， 发 出 调度 命令 。 


14.2 基于 Selenium Grid 的 分 布 式 测试 


Selenium Grid 是 一 个 基于 Java 构 建 的 分 布 式 测试 管理 系统 ， 兼 容 当 前 所 有 的 主流 操作 
系统 。 

Selenium Grid 架构 中 包含 两 个 角色 ， 分 别 是 中 央 节 点 〈Hub) 和 工作 节点 (Node) 。 
如 图 14-1 所 示 ， 每 个 工作 节点 可 以 运行 在 不 同 的 操作 系统 中 并 支持 不 同 的 浏览 器 ， 是 
实施 测试 的 实际 资源 ， 中 央 节 点 用 于 管理 各 个 工作 节点 的 注册 和 状态 信息 ， 接 受 远程 
WebDriver 测 试 脚本 请 求 ， 根 据 测试 脚本 的 环境 要 求 调度 合适 的 节点 资源 ， 并 把 随后 的 测 
试 命令 转发 到 对 应 的 工作 节点 执行 。 

由 于 工作 节点 可 以 配置 不 同 的 运行 环境 ， 针 对 某 种 使 用 频率 较 高 的 测试 环境 可 以 按 需 
分 配 更 多 的 计算 资源 ，Selenium Grid 大 大 提高 了 测试 用 例 的 执行 效率 并 节省 了 硬件 资源 的 
消耗 。 
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Selenium 
测试 脚本 


图 14-1 Selenium Grid 原理 


14.2.1 启动 中 央 节 点 


在 命令 控制 台 执 行 以 下 命令 启动 Selenium Grid 的 中 央 节 点 ， 其 默认 运行 于 4444 端 口 。 
参数 -role hub 表 明 当前 启动 的 是 一 个 中 央 节 点 。 


java -jar selenium-server-standalone-2.53.1.jar -role hub 





命令 运行 结果 如 图 14-2 所 示 ， 后 续 工作 节点 将 通过 网 址 http://192.168.2.51:4444/grid/ 
register/ 进 行 注册 。 


画 Administrator Command Prompt - java -jar selenium-server-standalone-2.53.1jar -role hub 


= | DIE 








14.2.2 ”注册 工作 节点 





中 央 节 点 启动 后 ， 用 户 需 要 将 工作 节点 注册 到 该 中 央 节 点 
与 中 央 节 点 类 似 ， da Server- sandslone 一 进 制 文件 进行 注册 ， 
参数 -role node 表 明 当 前 注册 的 是 一 个 工作 节点 ， 而 且 需 要 通过 hub 参 数 提供 中 央 节 点 的 注 
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册 地 址 。 参 数 browser 用 于 指定 该 工作 节点 支持 的 浏览 器 信息 ， 包 括 浏 览 器 的 名 称 、 版 本 
和 操作 系统 等 。 

如 图 14-3 所 示 ， 在 命令 控制 台 执 行 以 下 命令 将 注册 一 个 支持 Chrome 的 工作 节点 ， 该 工 
作 节 点 监听 默认 端口 5555， 接 受 中 央 节 点 的 测试 指令 。 








java -jar selenium-server-standalone-2.53.1.jar -role node -hub http://192.168.2.51:4444/ 


grid/register -browser "browserName=chrome,version=ANY" -Dwebdriver.chrome.driver= 


chromedriver 2.25.exe 
同一 台 机 器 可 以 支持 多 个 工作 节点 ， 但 需要 运行 于 不 同 的 端口 上 用 于 监听 中 央 节 点 的 
指令 。 例 如 以 下 命令 在 5556 端 口 创建 了 另 一 个 工作 节点 ， 可 支持 47.0.2 版 的 Firefox。 


java -jar selenium-server-standalone-2.53.1.jar -role node -hub http://192.168.2.51:4444/ 


grid/register -browser "browserName=firefox,version=47.0.2" -port 5556 


‘4444/grid/register -browser "bro,, 一 口 





Administrator: Command prompt - java -jar sdlenium-server-standalone-2.53.1jar -role node -hub http:/192. 





图 14-3 ”注册 工作 节点 
一 个 工作 节点 可 以 支持 多 种 浏览 器 ， 需 要 用 多 个 browser 参 数 来 指定 。 例 如 以 下 命令 
创建 的 工作 节点 同时 支持 Edge 和 正 。 





java -jar selenium-server-standalone-2.53.1.jar -role node -hub http://192.168.2.51:4444/ 
grid/register -browser "browserName=MicrosoftEdge,version=ANY" -browser "browserName=internet 
explorer,version=ANY" -Dwebdriver.ie.driver=IEDriverServer.exe -Dwebdriver.edge.driver= 


MicrosoftWebDriver.exe 
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所 有 已 经 注册 的 工作 节点 会 显示 在 中 央 节 点 的 管理 页 面 (本 例 为 http://192.168.2.51: 
4444/grid/console) 。 中 央 节 点 能 够 实时 监控 各 个 工作 节点 的 运行 情况 ， 任 何 离线 的 工 
作 节 点 不 会 影响 到 其 他 节点 的 运行 与 调度 。 如 图 14-4 所 示 ， 可 以 看 到 中 央 节 点 注册 在 
http://192.168.2.51:4444 上 ， 它 注册 了 3 个 工作 节点 : 注册 在 http://192.168.2.55:5555 上 的 工 
作 节 点 ， 支 持 Chrome 测 试 ， 注册 在 http://192.168.2.55:5556 上 的 工作 节点 ， 支 持 Firefox 测 
试 ; 注册 在 http://192.168.2.54:5555 上 的 工作 节点 ， 支 持 正 和 Edge 测 试 。 








La | 
€ © | © 192.168.2.514444/gridjconsoley 全 | 


pa 


[a 
Se Grid Console v.2.53.1 


Help 





5 和 
roveers srowsers EE 
Weboriver Webover 
vANY® VANY 


v:ANY 芽 





a httpi//192.1¢ OS :Wi 
Browsers 
webDriver 
v:47.0.2 国 





图 14-4 ”Selenium Grid 管理 页 面 


14.2.3 ”执行 测试 


如 以 下 代码 所 示 ， 只 需 在 Protractor 配 置 文件 中 设置 seleniumAddress 字 段 为 中 央 节点 的 
地 址 ， 就 可 以 通过 Selenium Grid 远程 执行 测试 脚本 。 对 于 Protractor 测 试用 例 而 言 ， 并 不 需 
要 关心 运行 测试 代码 的 是 一 台 Selenium Server 还 是 Selenium Grid 中 的 某 台 工作 节点 。 


exports.config = { 
directConnect: false, 
seleniumAddress: 'http://192.168.2.51:4444/wd/hub', 
specs: [ 
'specs/*.js' 
]， 
multiCapabilities: [ 


{browserName: 'firefox', version:'47.0.2'}, 
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{browserName: 
{browserName: 
{browserName: 
baseUrl: 


‘http://a 


framework: 'jasmin 


Es; 
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'MicrosoftEdge',elementScrollBehavior: 


根据 配置 文件 中 指定 
然后 


测试 结果 
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— Running 4 in 
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集成 一 一 Jasmine/Selenium/Protractor/Jenkins 的 最 人 


1, nativeEvents: 


false}, 


"internet explorer'}, 


'chrome'}], 


ngular.github.io/', 


e2 








浏览 器 类 型 和 版 本 ， 人 遍历 工人 
由 选 定 的 工作 节点 执行 测试 用 例 。 

会 显示 到 终端 ， 如 图 14-5 所 示 。 
测试 任务 。 











测试 用 例 并 不 


Administrator Command Prompt 


rid -conf 
of 


protracto: js 
ance: ebDriver 


stLogger 


[MicrosoftEdge #1i1] PID: 2949 


41:16] I/hosted — Using the selenium server at http /wd/hub 


3 instanceCs) of WebDriver still running 


r at http://192.168.2.51:4444/wd/hub 


2 instanceCs) of WebDriver 
Logger 


44/wd/hub 
pt 


pecs, 
hed in 41. 


1 instanceCs> of WehDriver still running 


- [chrone #31] PID: 836 
hosted — U 


ng the seleniun server a 168.2.51:4444/wd/hub 


日 of WebDriver still running 
MicrosoftEdge 11 passed 

internet explorer #21 pa 

Firefox47.9.2 NO1 passed 

chrone $31 passed 


图 14-5 ”基于 Selenium Grid 执行 测试 
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14.3 ”基于 云 计 算 的 分 布 式 测试 


近 几 年 ， 经 过 不 断 的 积累 和 持续 探索 ， 云 计算 达到 了 前 所 未 有 的 热度 ， 已 经 开始 成 为 
全 球 信息 产业 发 展 的 主题 ， 这 是 不 断 提高 的 计算 能 力 以 及 快速 普及 的 数字 化 产业 革命 催生 
的 新 的 商业 模式 。 

基于 美国 国家 标准 与 技术 研究 院 (NIST) 的 定义 ， 云 计算 是 一 种 按 使 用 量 付费 的 模 
式 ， 这 种 模式 提供 可 用 的 、 便 捷 的 、 按 需 的 网 络 访问 。 当 使 用 者 需要 计算 资源 的 时 候 ， 只 
需要 进入 计算 资源 共享 池 〈 资 源 包 括 网 络 、 服 务 器 、 存 储 、 应 用 软件 、 服 务 ) 加 以 简单 配 
置 ， 期 望 的 资源 就 能 够 被 快速 提供 。 整 个 过 程 中 ， 使 用 者 只 需 投 入 很 少 的 管理 工作 ， 或 与 
服务 供应 商 进行 很 少 的 交互 。 

在 传统 的 本 地 模式 下 ， 公 司 需要 充分 考虑 底层 网 络 、 数 据 存储 、 负 和 载 均 衡 和 管理 运 
维 等 事务 ， 公 司 虽 然 对 所 有 资源 有 最 充分 的 管理 权限 ， 但 IT 资源 的 采购 和 维护 费用 高 昂 。 
特别 是 建立 初期 ， 容 量 往往 高 于 实际 的 业务 负载 ， 造 成 了 服务 器 闲置 以 及 资源 的 浪费 。 同 
时 ， 随 着 公司 业务 的 增长 ， 后 期 硬件 资源 又 可 能 会 出 现 不 够 用 的 情况 ， 使 之 成 为 制约 公司 
发 展 的 瓶颈 。 无 论 是 资源 过 度 配置 还 是 供给 不 足 ， 都 是 IT 能 力 供需 之 间 的 矛盾 ， 而 这 正 是 
云 计算 致力 解决 的 问题 。 

与 传统 模式 不 同 ， 云 计算 强调 的 是 资源 共享 。 用户 仅 需 订阅 云 服 务 商 的 计算 资源 即 可 
完成 本 地 模式 下 的 相同 业务 ， 因 为 基础 设施 是 由 云 服务 商 维护 和 管理 。 云 服务 商 可 以 根据 
用 户 的 需求 实时 部 署 资源 ， 用 户 也 按 需 付费 ， 从 而 实现 定制 化 成 本 以 及 IT 设 施 的 利用 率 最 
大 化 。 对 用 户 而 言 ， 将 本 地 模式 转换 成 云 计算 模式 ， 可 以 大 幅 节 省 人 力 和 物力 ， 帮 助 企业 
快速 增长 。 

在 云 计 算 的 环境 下 ， 软 件 开发 工具 、 环 境 、 工 作 模式 也 正在 发 生 巨大 转变 ， 这 也 要 求 
软件 测试 的 工具 、 环 境 、 工 作 模式 也 随 之 发 生 相 应 的 转变 。 以 基于 Selenium Grid 的 自动 化 
测试 为 例 ， 对 一 个 企业 而 言 ， 提 供 所 有 的 测试 环境 包括 操作 系统 和 浏览 器 是 不 现实 的 ， 而 
使 用 云 上 的 测试 环境 ， 则 可 以 大 大 拓展 本 地 测试 环境 的 局 限 性 ， 通 过 云 实现 协同 管理 、 知 
识 共享 以 及 测试 复 用 。 

目前 市 场 上 提供 应 用 程序 测试 平台 的 云 服 务 商 很 多 ， 例 如 Sauce Labs 和 BrowserStack。 
其 中 ，Sauce Labs 的 联合 创始 人 正 是 大 名 鼎鼎 的 Selenium 发 明 人 Jason Huggins。 

Sauce Labs 的 云 测试 使 用 Selenium WebDriver 作 为 底层 测试 解决 方案 ， 可 以 对 网 络 浏览 
器 进行 自动 化 验收 测试 。 基 于 Sauce Labs， 开 发 人 员 可 以 测试 所 有 主流 操作 系统 上 的 所 有 
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主流 浏览 器 ， 包 括 IE、Firefox、Safari、Chrome 等 。 在 测试 时 可 以 对 错误 进行 截屏 和 视频 
记录 。 下 面 演示 使 用 Protractor 驱 动 Sauce Labs 进 行 自动 化 测试 的 方法 。 


(1) 在 Sauce Labs 上 注册 后 ， 可 以 登录 到 其 管理 界面 。 如 图 14-6 所 示 ， 在 用 户 设置 页 
面 ， 可 以 获得 秘 钥 (Access Key) ， 该 秘 钥 与 用 户 名 配对 用 于 唯一 地 标识 使 用 者 的 身份 。 


€ 了 加 | @ haps//saucelabscom tting: 











加 SAUCELABS 
息 Show 
辐 Archiv 
| 
-- Regenerate Access Key configureuoi 
日 0 | ng your old access key will fail 
Ne ena Tes 
NEW PASSWORD CONFIRM 
鳃 
只 MA 
£ 
图 14-6 ”Sauce Labs 管 理 界面 





(2) Protractor 配 置 文件 提供 了 关键 字 sauceUser 和 sauceKey， 将 用 户 名 与 秘 钥 填 入 即 
可 在 Sauce Labs 上 远程 执行 测试 用 例 。 秘 钥 的 作用 是 用 户 身份 验证 ， 需 要 妥善 保管 。 





为 了 避免 秘 钥 被 暴露 到 版 本 控制 库 ， 建 议 基 于 Sauce Labs 的 测试 只 运行 于 
® 集成 环境 ， 而 不 要 运行 于 开发 环境 。 为 此 ， 可 以 将 用 户 名 和 秘 钥 保存 到 集成 
服务 器 的 环境 变量 内 以 避免 泄露 。 
exports.config = { 





sauceUser:process.env.Sauce_User, 
sauceKey:process.env.Sauce Key, 
specs: [ 

“Specs/*.js" 


]， 


multiCapabilities: [ 
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{browserName: 'firefox', version:'47'}, 
{browserName: 'MicrosoftEdge',elementScrollBehavior: 1, nativeEvents: false}, 
{browserName: "internet explorer',platform:"'windows 10'}, 
{browserName: 'chrome',platform:'windows'}, 
{browserName: 'chrome',platform:'linux'}, 
{browserName: "safari',platform:'mac'}, 
{browserName: 'safari',platform:'windows 7°'}], 
baseUrl: "http://angular.github.io/"， 
framework: 'jasmine2', 


] 


(3) Sauce Labs 会 基于 Protractor 配 置 文件 内 对 操作 系统 和 浏览 器 类 型 的 声明 选择 计算 
资源 ， 并 行 地 运行 测试 用 例 。 所 有 的 测试 历史 记录 可 以 通过 管理 界面 查询 获得 ， 如 图 14-7 
所 示 ， 包 括 测试 运行 的 操作 系统 、 浏 览 器 类 型 和 版 本 ， 以 及 测试 结果 。 


€ GC | @ https//saucelabs.com/beta/dashboard/tests 站 | 加 
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图 147 Sauce Labs 测 试 历史 记录 
(4) 针对 每 一 个 测试 用 例 ，Sauce Labs 都 提供 了 视频 记录 、 命 令 记录 、 服 务 端 记录 和 
测试 配置 ， 如 图 14-8 所 示 ， 特 别 是 命令 记录 和 服务 端 记录 还 可 以 方便 地 帮助 用 户 进行 排 错 
下 和 作 。 
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图 14-8 ”Sauce Labs 测 试 报告 
(5) 被 测 网 站 在 正式 发 布 之 前 无 法 通过 互联 网 访问 ， 或 者 被 测 网 站 位 于 企业 防火 墙 
之 后 ， 对 于 这 类 情况 ， 可 以 使 用 Sauce Connect 代 理 服务 器 通过 为 Sauce Labs 的 虚拟 机 与 被 
测 网 站 之 间 建 立 连接 通道 ， 达 到 测试 的 目的 。 


14.4 配置 共享 


Protractor 的 自动 化 测试 非常 灵活 ， 既 可 以 在 本 机 上 直接 运行 测试 用 例 ， 也 可 以 通过 远 
程 的 Selenium Server 或 Selenium Grid 进行 测试 ， 甚 至 可 以 使 用 云 服务 商 提供 的 托管 环境 进 
行 测试 。 用 户 只 需要 修改 配置 文件 即 可 做 到 ， 非 常 方便 。 
以 上 3 种 方式 各 有 优点 也 各 有 其 适用 的 情况 。 一 般 来 说 : 
@ 本 机 直 连 是 速度 最 快 效率 最 高 的 ， 适 合 开发 人 员 在 开发 过 程 中 对 脚本 行为 进行 验 
证 与 修改 。 

@ 在 公司 内 搭建 专门 的 测试 服务 器 ， 适 合 针对 产品 的 主要 运行 环境 进行 集成 测试 。 

@ 对 于 大 型 或 使 用 基数 大 的 应 用 ， 公 司 的 测试 服务 器 往往 难以 履 盖 所 有 的 测试 环 
境 ， 这 时 候 可 以 考虑 基于 云 计算 的 分 布 式 测试 服务 。 

这 3 种 测试 方案 的 区 别 主要 在 于 Protractor 的 部 分 配置 不 同 。 从 最 佳 实践 的 角度 来 说 ， 
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如 果 能 把 测试 用 例 的 声明 、 测 试 报告 的 设置 等 一 致 的 部 分 在 3 个 配置 文件 中 进行 直接 共 
享 ， 则 可 以 减少 配置 的 维护 成 本 ， 防 止 出 现 误 改 或 漏 改 的 情况 。 
以 下 示例 代码 中 ， 创 建 protractor.shared.conf.js 文 件 作 为 配置 的 共享 部 分 ， 被 其 他 3 个 




















配置 文件 引用 。 
以 下 为 protractor.shared.confjs 文 件 的 示例 代码 : 





exports.config = { 
specss ['specs/*.js"]; 
baseUrl: "http://angular.github.io/"， 
framework: 'jasmine2', 
onPrepare: function() { 


Var jasmineReporters = require('jasmine-reporters'); 








jasmine.getEnv() .addReporter (new jasmineReporters.JUnitxmlReporter({ 


consolidateAll: true, 
savePath: 'testresults’', 
filePrefix: 'xmloutput' 


1)); 


以 下 为 protractor.local.confjs 文 件 的 示例 代码 : 


var config = require('./protractor.shared.conf.js') .config; 
config.directConnect = true; 
config.capabilities = {browserName: 'chrome'}; 


exports.config = config; 


以 下 为 protractor.remote.confjs 文 件 的 示例 代码 : 


var config = require('./protractor.shared.conf.js') .config; 
config.directConnect = false; 


config.seleniumAddress = 'http://192.168.2.51:4444/wd/hub'; 
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以 下 为 protractor.cloud.confjs 文 件 的 示例 代码 : 





集成 篇 


第 15 章 ”持续 集成 概论 
第 16 章 ”持续 测试 


第 1S 章 
持续 集成 概论 “~ 


9 


随 着 云 计 算 、 大 数据 、 机 器 学 习 等 新 兴 技 术 的 发 展 ， 企 业 在 向 最 终 用 户 交付 以 及 维护 
安全 、 高 质量 软件 和 服务 方面 ， 面 临 着 越 来 越 大 的 压力 。 持 续集 成 以 敏捷 开发 为 基础 ， 通 
过 整合 公司 的 产品 开发 和 运 维 部 门 ， 让 整个 软件 交付 生命 周期 中 的 所 有 参与 者 ， 在 持续 交 
付 的 推动 下 ， 通 过 不 断 的 反馈 ， 最 终 实现 产品 全 生命 周期 的 高 效 运行 。 

作为 不 断 发 展 的 开发 模式 ， 持 续集 成 不 只 是 简单 的 技术 变革 ， 它 在 改善 产品 性 能 、 软 
件 质 量 以 及 提升 用 户 体验 方面 的 作用 越 来 越 显著 。 

本 章 将 介绍 : 

@ 开发 流程 自动 化 

@ 持续 集成 的 功能 特征 

@ 如 何 实施 持续 集成 

@ 选择 持续 集成 工具 


15.1 开发 流程 自动 化 


事实 证 明 传 统 的 开发 模式 仅 适 用 于 小 型 ， 外 部 依赖 较 少 的 项 目 ， 随 着 软件 开发 复杂 度 
的 不 断 提高 ， 团 队 开 发 成 员 间 能 否 更 好 的 协同 工作 以 确保 软件 开发 的 质量 ， 能 否 通过 流程 
管理 解决 软件 开发 的 上 下 游 协 作 已 成 为 开发 过 程 中 不 可 回避 的 问题 。 尤 其 是 近 些 年 来 ， 敏 
捷 开 发 模式 在 软件 工程 领域 得 到 广泛 应 用 ， 软 件 开发 急需 一 种 自我 管理 ， 自 我 适应 ， 让 开 
发 自动 化 起 来 的 新 模式 。 
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15.1.1 什么 是 持续 集成 


很 多 人 都 听 说 过 敏捷 方法 ， 这 个 概念 带 来 了 改变 团队 组 织 的 工作 方式 、 适 应 不 断 变化 
的 需求 的 方式 以 及 发 布 软件 的 方式 。 

持续 集成 Continuous Integration， 简 称 CI) 正 是 为 敏捷 开发 而 创建 的 。 根 据 Martin 
Fowler 的 观点 ， 持 续集 成 是 一 种 软件 开发 实践 ， 要 求 团 队 成 员 经 常 集成 他 们 的 工作 ， 每 
个 人 至 少 每 天 集成 一 次 ， 这 导致 每 天 有 多 个 集成 。 集 成 是 通过 自动 化 构建 进行 的 ， 这 
些 构 建 运行 回归 测试 ， 以 尽快 检测 软件 缺陷 。Martin Fowler 建 议 通 过 持续 集成 达到 以 下 
目标 : 

@ 任何 人 在 任何 地 点 ， 任 何 时 间 可 以 构建 整个 项 目 。 

@ 在 持续 集成 构建 过 程 中 ， 每 一 个 测试 都 必须 被 执行 。 

@ 在 持续 集成 构建 过 程 中 ， 每 一 个 测试 都 必须 通过 。 

@ 持续 集成 构建 的 结果 是 可 以 发 布 的 软件 包 。 

@ 当 以 上 任何 一 点 不 能 满足 时 ， 整 个 团队 的 主要 任务 是 优先 解决 这 个 问题 。 

作为 一 种 软件 开发 实践 ，Martin Fowler 对 如 何 通 过 持续 集成 提高 软件 开发 效率 并 保障 
软件 开发 质量 提供 了 理论 基础 。 经 过 近 十 年 的 不 断 演化 发 展 ， 持 续集 成 变 成 了 持续 编译 、 
测试 、 检 查 和 部 署 源 代码 的 代名词 。 这 意味 着 每 当 源 代码 管理 库 中 的 代码 发 生 改 变 时 ， 都 
要 执行 新 的 构建 。 开 发 团队 发 现 ， 这 种 以 较 小 增 量 不 断 欠 代 的 开发 模式 能 够 让 集成 问题 大 
幅 减 少 ， 更 快 的 交付 有 竞争 力 的 软件 产品 。 


15.1.2 ”持续 集成 的 价值 


持续 集成 倡导 团队 开发 成 员 经 常 集成 他 们 的 工作 ， 甚 至 每 天 都 进行 多 次 集成 ， 而 每 
次 的 集成 都 是 通过 自动 化 构建 进行 的 。 这 里 的 构建 是 编译 、 部 署 、 测 试 、 审 查 和 反馈 的 一 
组 流程 ， 自 动 化 的 构建 意味 着 整个 流程 不 需要 任何 用 户 的 手工 干预 ， 也 叫 作 无 人 值守 的 过 
程 。 持 续集 成 的 优点 包括 : 

1. 及 早 发 现 缺 陷 

结合 测试 驱动 的 开发 理论 构建 测试 用 例 ， 然 后 编写 功能 代码 。 随 着 每 一 次 新 代码 的 
添加 ， 将 其 对 应 的 测试 用 例 也 添加 到 集成 工作 环境 的 测试 套件 中 。 每 天 多 次 进行 集成 并 执 
行 测试 和 审查 ， 可 以 确保 新 增 代码 不 会 破坏 之 前 的 工作 。 即 使 出 现 了 回归 缺陷 ， 在 代码 刚 
提交 到 代码 控制 库 就 被 能 被 发 现 ， 开 发 人 员 可 以 迅速 获得 通知 ， 而 不 必 等 到 项 目 后 期 才 发 
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现 。 缺 陷 发 现 得 越 早 ， 修 复 难 度 越 低 ， 对 后 续 功能 的 影响 越 小 ， 这 也 直接 降低 了 软件 开发 
的 成 本 ， 让 团队 能 够 更 快 、 更 高 效 地 开发 软件 。 

2. 减少 重复 劳动 

通过 构建 自动 化 ， 让 所 有 工作 流 自我 驱动 ， 包 括 代码 编译 、 数 据 库 集成 、 测 试 、 审 
查 、 部 署 和 反馈 。 这 大 大 减少 了 开发 测试 人 员 的 重复 劳动 ， 让 他 们 有 时 间 做 更 多 需要 动脑 
筋 、 有 更 高 探索 性 的 工作 。 

3. 随时 发 布 可 部 署 的 软件 

很 多 软件 项 目 都 有 一 个 奇怪 而 又 常见 的 特征 ， 即 在 开发 过 程 中 ， 程 序 在 相当 长 的 一 段 
时 间 里 是 无 法 运行 的 。 实 际 上 ， 由 大 规模 团队 开发 的 软件 中 ， 绝 大 部 分 在 开发 过 程 的 前 半 
段 基本 处 于 不 可 用 状态 。 因 为 没有 人 有 兴趣 在 开发 完成 之 前 运行 整个 应 用 ， 可 以 想象 这 时 
会 存在 很 多 潜在 问题 。 开 发 人 员 更 倾向 于 最 后 再 去 解决 这 些 问题 。 

持续 集成 的 概念 带 来 了 自动 化 构建 和 可 重复 构建 ， 自 动 化 测试 和 可 重复 测试 。 这 意 
味 着 无 论 是 哪 种 平台 ， 哪 种 技术 ， 在 任何 时 间 点 上 团队 成 员 提交 的 代码 都 应 该 能 够 成 功 
集成 。 换 句 话说， 持续 集成 让 第 一 时 间 发 现 软件 缺陷 成 为 可 能 ， 如 果 任 何 代 码 变更 导致 
了 该 问题 ， 开 发 人 员 会 立刻 得 到 通知 进行 软件 修复 ， 使 任意 时 间 发 布 可 部 署 的 软件 成 为 
可 能 。 

相反 ， 不 采用 持续 集成 实践 的 项 目 可 能 需要 等 到 交付 之 前 才 对 软件 进行 集成 部 署 ， 
这 可 能 导致 产品 发 布 的 延迟 或 不 能 修复 某 些 缺 陷 。 如 果 急于 完成 任务 ， 则 可 能 引入 新 的 缺 
陷 ， 最 后 导致 项 目 失败 。 

4. 实现 分 布 式 团 队 协作 

软件 开发 一 直 以 来 都 主张 协作 是 系统 成 功 开发 和 交付 的 关键 因素 。 软 件 生命 周期 会 涉 
及 到 开发 、 测 试 和 运 维 等 不 同 的 团队 。 大 型 项 目的 团队 成 员 一 般 不 可 能 坐 在 同一 个 办 公 室 
工作 ， 甚 至 可 能 处 于 不 同 的 时 区 。 有 效 的 分 布 式 团队 协作 不 仅 包 括 从 一 个 团队 到 另 一 个 团 
队 的 有 效 移交 ， 还 包括 对 需求 、 特 点 和 安排 的 全 面 协调 和 理解 。 

持续 集成 良好 的 架构 可 以 支持 这 种 协作 ， 原 因 是 通过 共享 的 代码 控制 系统 和 持续 反 
馈 ， 技 术 人 员 可 以 更 好 地 了 解 他 们 正在 构建 的 各 个 组 件 之 间 的 依赖 关系 。 持 续集 成 可 以 有 
效 地 实现 分 布 式 团队 的 协作 沟通 ， 确 保 创建 符合 需求 的 产品 ， 并 且 快 速 识别 和 纠正 出 现 的 
偏差 。 

5. 反映 实时 趋势 

持续 集成 让 开发 人 员 能 够 注意 到 趋势 并 进行 有 效 的 决策 。 如 果 没 有 真实 或 最 新 的 数据 
提供 支持 ， 项 目 就 会 遇 到 障碍 。 传 统 模式 下， 项目 成 员 以 手工 方式 收集 这 些 信息 ， 不 仅 增 
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加 了 负担 ， 还 很 耗 时 。 持 续集 成 系统 为 项 目 构建 状态 和 品质 指标 提供 了 及 时 的 信息 ， 有 些 
持续 集成 系统 可 以 报告 功能 完成 度 和 缺陷 率 。 通 过 这 些 ， 项 目 成 员 可 以 看 到 产品 的 整体 趋 
势 ， 包 括 构建 成 功 或 失败 、 总 体 品 质 以 及 其 他 相关 的 项 目 信息 。 

6. 建立 团队 信心 

团队 的 信心 来 自 于 质量 把 控 ， 特 别 是 项 目 经 理 为 了 全 方位 了 解 开发 进展 ， 需 要 随时 间 
自己 ， 如 果 我 的 产品 必须 在 下 周 发 布 ， 哪 些 部 分 将 会 产生 最 大 风险 ? 这 是 否 是 一 个 高 品质 
的 发 布 ? 如 果 有 需求 变更 ， 需 要 多 少时 间 进 行 实施 ? 

基于 自动 化 构建 的 持续 集成 让 团队 成 员 在 任何 时 候 都 了 解 产品 的 状态 ， 特 别 是 结合 测 
试 驱动 后 ， 可 以 实时 地 知道 当前 已 经 完成 了 什么 功能 ， 还 有 什么 缺陷 需要 修复 ， 当 前 部 署 
的 版 本 对 系统 有 什么 要 求 。 面 对 加 快 交付 周期 的 市 场 压 力 ， 确 切 地 了 解 项 目 进展 在 需求 不 
明确 或 是 频繁 性 变更 的 产品 开发 中 尤为 重要 。 能 够 快速 地 回答 以 上 问题 也 可 以 帮助 项 目 经 
理 全 面 掌握 要 添加 哪些 资源 、 在 何 处 调整 产品 特性 ， 以 及 何 时 重新 建立 交付 日 期 。 这 一 切 
都 是 对 质量 把 控 的 有 效 帮助 ， 可 以 让 团队 对 自己 的 工作 更 有 信心 ， 从 而 成 功 地 将 产品 发 布 
到 市 场 并 获得 竞争 优势 。 


15.2 ”持续 集成 的 功能 特征 


持续 集成 的 核心 思想 是 构建 自动 化 ， 一 般 来 说 包括 编译 、 测 试 、 审 计 、 部 署 和 反馈 
5 个 特征 。 也 就 是 说 ， 持 续集 成 的 目的 正 是 把 这 5 个 功能 自动 地 持续 运转 起 来 。 功 能 越 复 
杂 ， 持 续集 成 的 价值 也 越 高 。 


15.2.1 编译 


持续 的 源 代码 编译 是 CI 系统 中 最 基本 的 功能 ， 指 的 是 基于 开发 人 员 提交 的 源 代 码 生 成 
可 执行 代码 。 近 些 年 ， 随 着 更 多 语言 类 型 例如 JavaScript 和 CSS 的 不 断 兴 起 ， 编 译 的 概念 与 
传统 的 C++、C# 等 出 现 了 某 种 程度 的 变化 。 这 些 语 言 种 类 虽然 不 会 直接 生成 二 进 制 文件 ， 
但 都 提供 了 语法 检查 等 类 似 功能 ， 也 可 以 认为 是 一 种 编译 过 程 。 另 外 ， 越 来 越 多 的 公司 开 
始 尝 试用 更 高 级 的 语言 例如 TypeScrip 和 Less 来 编译 生成 JavaScript 和 CSS， 所 以 编译 仍然 是 
CI 系统 中 最 基本 的 特征 ， 也 是 集成 开始 的 地 方 。 


| 344 | Web 前 端 测试 与 集成 一 一 Jasmine/Selenium/Protractor/Jenkins 的 最 佳 实践 


15.2.2 测试 


持续 测试 是 CI 系统 的 基石 ， 也 是 质量 管理 的 保证 。 如 果 有 人 对 你 说 他 的 CI 系统 不 包括 
测试 的 部 分 ， 那 么 这 个 CI 系统 只 能 是 无 源 之 水 ， 无 本 之 木 ， 效 果 一 定 会 大 打折 扣 ， 开 发 人 
员 或 相关 的 项 目 负责 人 对 软件 的 质量 也 将 很 难 有 信心 。 

测试 的 种 类 很 多 ， 大 致 包 括 单元 测试 、 集 成 测试 、 端 到 端 自动 化 测试 、 性 能 测试 和 安 
全 测试 等 。 之 所 以 需要 对 测试 进行 分 类 ， 原 因 是 不 同 目的 的 测试 对 环境 的 需求 不 同 ， 分 类 
后 可 以 在 自动 化 构建 中 决定 执行 的 顺序 和 部 署 条 件 。 例 如 ， 如 果 每 次 在 代码 提交 后 立即 进 
行 自动 化 测试 ， 则 整个 过 程 首 先 需 要 构建 虚拟 化 的 操作 系统 、 安 装 数据 库 以 及 部 署 软件 。 
考虑 到 自动 化 测试 本 身 耗 时 较 长 而 代码 提交 的 频率 很 高 ， 这 样 的 持续 测试 设计 只 会 让 测试 
严重 滞后 于 开发 进展 ， 甚 至 导致 CI 资源 耗 尽 。 


15.2.3 审计 


大 型 项 目 对 代码 质量 的 要 求 往 往 较 高 ， 从 而 确保 产品 质量 与 可 维护 性 。 一 般 而 言 ， 代 
码 质 量 的 要 求 包括 : 

1. 较 低 的 代码 复杂 度 ， 避 免 多 层 幅 套 的 条 件 判 断 

研究 表明 ， 代 码 复杂 度 越 高 ， 出 现 缺 陷 的 概率 越 大 ， 而 可 维护 性 也 越 低 。 

2. 避免 重复 代码 

对 重复 代码 进行 重 构 是 很 多 项 目 里 无 法 避免 的 课题 ， 很 容易 造成 对 额外 编写 的 代码 
增加 测试 成 本 。 同 时 ， 因 为 代码 出 现在 项 目的 多 个 地 方 ， 任 何 一 次 缺陷 修复 都 需要 多 次 查 
找 ， 多 次 分 析 ， 维 护 成 本 很 高 。 

3. 符合 代码 规范 

不 同 的 编程 语言 尽管 语法 千差万别 ， 但 都 有 各 自 的 语法 规范 和 最 佳 实践 。 例 如 .NET 
平台 下 的 FoxCop 和 JavaScript 常 用 的 JSHint 等 。 

4. 单元 测试 的 代码 覆盖 率 

良好 的 代码 覆盖 率 能 确保 代码 按 开 发 人 员 设计 的 路 径 工 作 ， 避 免 自动 化 测试 无 法 考虑 
到 的 边缘 情况 。 

测试 本 身 是 动态 的 ， 需 要 通过 测试 用 例 生 成 报告 ， 对 软件 规格 进行 描述 。 代 码 审计 绝 
大 多 数 是 静态 的 ， 例 如 代码 规范 检查 的 工具 JSHint 可 以 作为 单独 的 步骤 对 JavaScript 代 码 进 
行 检查 并 生成 质量 报告 。 近 几 年 ， 随 着 JavaScript 构 建 工 具 的 兴盛 ， 很 多 项 目 开 始 把 代码 
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审计 归并 到 测试 概念 里 ， 审 计 报告 也 属于 测试 报告 的 一 部 分 。 另 外 ， 像 代码 覆盖 率 这 种 审 
计 本 身 就 需要 由 单元 测试 的 驱动 来 完成 ， 因 此 很 自然 地 也 成 为 了 测试 的 一 部 分 。 


15.2.4 部 署 


持续 部 署 能 工作 的 软件 ， 是 CI 系统 里 很 重要 的 一 环 ， 良 好 地 实施 持续 部 署 会 让 项 目 大 
大 受益 。 昌 然 每 个 产品 都 有 其 自身 的 独特 之 处 ， 但 无 非 包 括 操作 系统 、 外 部 依赖 和 产品 本 
身 ， 高 效 地 创建 能 工作 的 软件 环境 可 以 让 通常 最 容易 出 错 的 部 分 彻底 自动 化 。 这 在 减轻 运 
维 负担 的 同时 ， 也 让 开发 人 员 能 够 随时 了 解 项 目 最 新 进展 和 可 部 署 状 态 ， 不 至 于 在 发 布 之 
前 才 仓促 加 班 ， 寻 找 生 产 环境 与 开发 环境 的 区 别 。 

为 了 实现 持续 部 署 ， 建 议 首先 要 提供 干净 的 环境 以 减少 对 已 有 软件 的 依赖 假定 ， 另 外 
每 次 构建 都 应 该 打上 标签 ， 如 果 出 现 了 问题 ， 可 以 迅速 回 滚 到 上 个 标签 所 在 之 处 。 


15.2.5 反馈 


反馈 是 持续 集成 的 输出 ，CI 系 统 前 期 所 有 功能 都 是 为 了 让 反馈 成 为 开发 人 员 获取 一 手 
信息 的 窗口 。 持 续 反 馈 不 会 改变 软件 本 身 ， 但 提供 了 手段 ， 在 特定 的 事件 发 生 时 ， 将 不 同 
的 信息 发 送 给 不 同 的 角色 。 收 到 信息 的 人 员 对 信息 完全 理解 ， 可 以 在 第 一 时 间 采 取 最 有 效 
的 措施 来 解决 问题 。 

对 于 开发 团队 而 言 ， 能 够 基于 测试 结果 了 解 最 新 版 本 的 工作 情况 ， 决 定 是 否 进行 回 滚 
或 缺陷 修复 ， 这 些 信息 也 可 以 汇集 起 来 确定 项 目的 发 展 趋势 。 除 开发 团队 外 ， 客 户 、 项 目 
经 理 和 投资 人 也 可 以 通过 反馈 渠道 沟通 信息 ， 而 沟通 是 否 准确 和 及 时 正 是 由 反馈 方式 所 决 
定 的 ， 这 些 方式 包括 邮件 、 声 音 、 电 话 或 者 可 视 设 备 等 。 


15.3 ”如 何 实施 持续 集成 


15.3.1 消除 误解 


尽管 持续 集成 有 诸多 好 处 ， 很 多 项 目 团 队 却 对 其 望而却步 ， 原 因 是 诸多 误解 让 开发 人 
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员 以 为 持续 集成 会 是 一 件 工程 浩大 却 吃力 不 讨好 的 事情 ， 所 以 在 实施 持续 集成 之 前 首先 要 
消除 项 目 团队 的 误解 : 

1. 增加 了 运 维 成 本 

实际 上 ， 无 论 是 否 使 用 了 持续 集成 ，CI 系 统 中 提 到 的 5 大 功能 点 (编译 、 测 试 、 审 
计 、 部 署 和 反馈 ) 都 必 不 可 少 ， 无 非 是 这 些 步 骤 通 过 手工 过 程控 制 还 是 使 用 CI 系统 代为 管 
理 而 已 。 与 其 使 用 不 可 控 的 手工 控制 ， 不 如 管理 一 个 健壮 的 CI 系统 ， 其 带 来 的 便利 性 不 言 
而 喻 。 

2. 害怕 失败 的 反馈 

复杂 项 目的 开发 不 可 能 一 路 坦途 ， 持 续集 成 的 核心 精神 正 是 经 常 地 提交 代码 ， 让 失败 
的 反馈 使 开发 人 员 知 道 错误 发 生 在 哪个 变更 或 者 哪个 版 本 上 ， 这 才 是 高 质量 控制 的 途径 。 
如 果 因 为 害怕 收 到 失败 的 反馈 ， 王 脆 做 一 只 埋 起 头 来 的 能 鸟 ， 但 只 会 让 所 有 问题 在 后 期 全 
面 暴露 ， 影 响 整 个 产品 的 正常 发 布 ， 甚 至 导致 项 目 失败 。 

3. CI 系统 过 于 复杂 

恰恰 相反 ， 作 为 CI 系统 基石 的 构建 工具 已 经 是 非常 成 熟 的 技术 ，Ant、NAnt、make、 
MSBuild、Rake、gulp 等 都 可 以 轻松 满足 各 种 自动 化 需求 ， 结 合 CI 工具 提供 的 工作 流 ，CI 
系统 的 部 署 和 实施 不 仅 不 再 是 一 个 复杂 无 趣 的 业务 ， 反 而 是 一 个 充满 乐趣 和 鼓励 创新 的 前 
沿 技术 。 


15.3.2 前提 条 件 


要 想 成 功 实施 持续 集成 ， 需 要 开发 团队 能 够 完全 遵守 实践 的 准则 ， 前 提 条 件 包括 以 下 
几 点 : 

1. 版 本 控制 库 

一 般 来 说 ， 对 于 团队 型 开发 ， 只 要 人 数 超过 两 个 ， 就 很 难保 证 所 有 人 员 能 够 互 不 干扰 
的 变更 代码 了 。 为 了 更 高 效 地 工作 ， 与 项 目 相 关 的 所 有 内 容 都 应 该 提交 到 版 本 控制 库 ， 包 
括 产品 代码 、 测 试 代码 、 构 建 脚本 以 及 外 部 依赖 等 。 

版 本 控制 库 通 过 受 控 的 代码 仓库 管理 所 有 与 软件 开发 相关 的 资产 变更 ， 为 团队 成 员 提 
供 权威 的 代码 访问 渠道 。 沿 着 时 间 回 滴 ， 开 发 人 员 可 以 取得 文件 的 不 同 版 本 。 基 于 版 本 控 
制 库 ， 团 队 成 员 既 能 同时 工作 于 软件 的 不 同 组 件 ， 又 能 维护 之 间 的 协作 以 及 提交 记录 。 
版 本 控制 工具 种 类 众多 ， 比 较 出 名 的 有 Perforce、ClearCase、CVS、Subversion、TFS 和 
Git 等 。 
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2. 自动 化 构建 工具 

自动 化 构建 工具 一 般 至 少 要 包括 代码 编译 、 组 件 打包 、 程 序 执行 等 功能 。 编 译 源 代 
码 是 构建 的 主要 工作 之 一 ， 为 了 提高 效率 ， 编 译 应 该 根据 相应 的 源 代码 是 否 发 生 改 变 而 有 
条 件 地 执行 。 组 件 打包 是 将 编译 的 结果 和 其 他 需要 包含 的 文件 等 组 织 在 一 起 ， 形 成 可 以 
部 署 的 组 件 。 构 建 工 具 应 该 知道 何 时 需要 重新 打包 。 程 序 执行 是 指 构 建 工具 在 它 支 持 的 
平台 上 ， 调 用 所 有 提供 命令 行 接口 的 程序 。 常 用 的 构建 工具 包括 Ant、NAnt、MSBuild、 
make、Maven、Rake 和 gulp 等 ， 开 发 人 员 应 该 将 构建 脚本 和 代码 同等 对 待 ， 并 不 断 重 构 和 
优化 ， 以 保证 其 整洁 和 易于 理解 。 

3. 团队 合作 与 共识 

持续 集成 是 一 种 开发 实践 而 不 是 一 个 死板 的 工具 。 由 于 其 本 身 襄 括 了 软件 开发 生命 周 
期 的 方方面面 ， 开 发 人 员 、 测 试 人 员 、 项 目 经 理 乃 至 运 维和 人 员 都 投身 其 中 ， 良 好 的 团队 合 
作 是 实施 持续 集成 的 基础 。 

另外 ， 它 需要 团队 给 予 一 定 的 投入 并 遵守 约定 的 准则 ， 需 要 每 个 开发 人 员 都 能 以 小 步 
增 量 的 方式 频繁 地 修改 代码 并 进行 提交 。 如 果 大 家 不 能 按 准 则 实施 ， 例 如 长 期 在 本 地 进行 
私有 构建 而 不 进行 提交 ， 则 持续 集成 系统 无 法 对 其 进行 检验 ， 更 无 法 如 期 望 的 那样 通过 持 
续集 成 提高 软件 的 质量 。 


15.3.3 CI 工具 


实施 持续 集成 有 多 种 选择 ， 可 以 创建 自己 的 集成 工具 ， 也 可 以 手工 执行 ， 但 大 型 团队 
往往 使 用 多 种 技术 开发 ， 每 天 可 能 会 积累 很 多 代码 变更 ， 自 己 创 建 的 工具 很 难 完全 满足 所 
有 需求 并 提供 高 品质 的 集成 效果 。 

编译 、 测 试 和 部 署 等 工作 虽然 可 以 通过 脚本 来 集成 ， 但 CI 工具 能 够 提供 更 直接 的 集成 
方式 ， 效 率 更 高 。 现 在 市 场 上 有 许多 优秀 的 CI 工具 ， 例 如 Bamboo、Travis CI、TeamCity、 
Buddy、Go 和 Jenkins 等 ， 其 中 甚至 不 乏 免费 的 产品 。 这 些 CI 工具 在 安装 后 ， 仅 需要 几 分 钟 
即 可 完成 基本 配置 ， 实 施 起 来 非常 方便 。 同 时 ， 它 们 配置 好 后 即 原生 提供 集成 需要 的 功 
能 ， 并 能 够 很 容易 地 进行 扩展 。 因 此 ， 在 实施 持续 集成 的 时 候 建议 开发 团队 使 用 已 有 的 CI 
工具 ， 而 没 必要 自己 专门 写 一 个 。 

从 根本 上 而 言 ，CI 工 具 就 是 一 个 自动 化 的 交付 流程 。 但 这 并 不 意味 着 使 用 了 CI 工具 
就 不 需要 人 工 参与 了 ， 而 是 把 执行 过 程 中 那些 容易 出 错 且 复杂 的 步骤 通过 可 靠 的 工具 来 持 
续 地 自动 完成 。 在 这 个 过 程 中 ， 开 发 人 员 从 单调 易 出 错 的 脚本 编译 等 工作 和 流程 中 解脱 出 
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来 ， 以 便 专 注 于 更 有 价值 、 更 有 创造 力 的 业务 设计 、 缺 陷 调 试 、 沟 通 协调 等 工作 中 。 

CI 工具 一 般 由 两 部 分 组 成 。 一 部 分 是 一 个 长 期 运行 的 工作 流 ， 以 特定 的 时 间 间 隔 轮 询 
版 本 控制 库 中 的 变更 ， 定 期 或 基于 事件 触发 某 些 构建 ， 向 相应 人 员 发 送 反馈 等 。 某 些 CI 工 
具 还 包括 扩展 功能 ， 例 如 执行 开发 者 测试 、 文 档 集成 、 部 署 功能 和 代码 品质 分 析 等 。 另 一 
部 分 一 般 以 Web 服 务 器 的 形式 存在 ， 通 过 信息 面板 显示 构建 历史 ， 查 看 执行 结果 是 成 功 还 
是 失败 ， 以 及 具体 的 详情 报告 等 。 

图 15-1 展 现 了 一 个 常见 的 CI 场景 : 


发 送 反馈 一 一 加 - 
-eh 
A 邮件 服务 器 \ 7 


Wa 构建 应 用 
开发 者 有 应 用 服务 器 
i 一 一 二 
Wl “ 油 建 数据库 
一 ae < 轿 
ng 查看 报告 数据 库 


图 15-1 持续 集成 流程 

(1) 开发 者 修改 代码 进行 本 地 构建 ， 确 认 无 误 后 ， 向 版 本 控制 库 提交 变更 。 

(2) 代码 提交 后 ，CI 服 务 器 通过 轮 询 检查 到 新 的 变更 ;或 者 版 本 控制 库 可 以 触发 事 
件 通知 CI 服务 器 发 生 了 提交 变更 。 

(3) CI 服务 器 取得 最 新 的 代码 副本 执行 构建 ， 包 括 构建 应 用 、 构 建 数据 库 和 执行 测 
试 等 。 

(4) CI 服务 器 向 开发 人 员 发 送 邮件 反馈 ; 开发 人 员 也 可 以 通过 访问 CI 服务 器 的 Web 
站 点 查询 构建 结果 。 


15.3.4 ”实践 准则 


实施 持续 集成 遵循 以 下 实践 准则 : 

1. 专门 的 CI 服务 器 

CI 服务 器 是 持续 集成 的 核心 部 件 ， 用 于 执行 构建 脚本 。 建 议 使 用 专门 的 服务 器 运行 CI 
工具 ， 从 而 保持 其 环境 的 干净 ， 避 免 不 必要 的 冲突 导致 的 构建 失败 。 
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2. 频繁 地 提交 代码 

只 有 频繁 地 提交 变更 ， 才 能 享受 到 版 本 控制 所 带 来 的 诸多 好 处 ， 比 如 能 轻松 回 滚 到 某 
个 之 前 的 版 本 。 另 外 ， 一 旦 变更 提交 到 版 本 控制 库 ， 开 发 团队 的 其 他 成 员 就 能 够 立刻 看 到 
并 及 时 与 之 同步 。 反 之 ， 如 果 把 若干 天 的 代码 修改 作为 一 次 变更 进行 提交 将 会 遇 到 较 多 的 
变更 冲突 ， 需 要 更 多 的 时 间 进 行 集成 。 

3. 提交 前 执行 本 地 构建 

为 了 防止 集成 构建 失败 ， 开 发 人 员 应 该 在 提交 前 在 自己 本 地 环境 内 执行 一 次 构建 ， 这 
将 确保 有 缺陷 的 变更 不 会 导致 集成 环境 里 的 错误 。 当 然 ， 这 也 取决 于 具体 情况 ， 诸 如 自动 
化 测试 等 耗 时 较 长 或 需要 部 署 环境 的 测试 ， 可 以 考虑 在 本 地 省 略 或 只 执行 冒 烟 测 试 。 

4. 每 次 变更 触发 构建 

软件 可 以 分 为 代码 、 配 置信 息 和 数据 ， 其 中 任何 一 部 分 发 生 了 变化 都 可 能 导致 软件 行 
为 发 生变 化 。 所 以 ， 每 次 变更 提交 后 都 应 该 触发 构建 ， 特 别 是 单元 测试 和 代码 审计 ， 确 保 
所 有 的 修改 都 得 到 验证 。 

5. 快速 构建 

如 果 整 个 构建 包括 编译 、 测 试 和 审计 需要 花 很 长 时 间 执 行 的 话 ， 持 续集 成 的 效果 会 打 
折扣 。 一 方面 ， 如 果 构 建 时 间 较 长 ， 则 每 次 构建 也 会 相应 包含 较 多 的 变更 ， 若 出 现 错误 ， 
很 难 确定 是 哪个 变更 造成 的 。 另 外 ， 代 码 提交 或 者 集成 的 效率 也 会 降低 ， 因 为 开发 人 员 需 
要 等 本 地 构建 完成 并 确认 当前 的 最 新 版 本 可 以 成 功 构建 后 再 提交 代码 。 

如 果 项 目 庞大 ， 构 建 速度 无 法 完全 优化 ， 则 建议 考虑 使 用 分 布 式 的 CI 架构 。 

6. 只 生成 一 次 二 进 制 文 件 

很 多 构建 系统 会 在 同步 版 本 控制 库 中 的 源 代码 后 ， 在 不 同 的 上 下 文中 重复 执行 编译 ， 
甚至 在 不 同 环境 中 部 署 前 都 要 重新 编译 一 次 。 但 对 于 同一 份 源 代码 ， 每 次 都 重新 编译 会 引 
入 结果 不 一 致 的 风险 ， 有 可 能 引起 软件 的 行为 不 一 致 现象 。 

7. 尽快 接受 反馈 

开发 人 员 能 够 对 反馈 在 第 一 时 间作 出 反应 ， 例 如 当 出 现 构 建 失败 ， 可 以 立即 展开 修复 
工作 是 持续 集成 的 基础 。 否 则 ， 如 果 构 建 失败 的 邮件 已 经 发 出 ， 而 开发 人 员 却 没有 查看 邮 
件 ， 那 么 这 个 构建 错误 可 能 会 长 期 在 版 本 控制 库 里 存在 ， 直 接 影响 到 后 续 版 本 的 构建 。 对 
于 这 种 情况 ， 除 了 邮件 反馈 ， 还 可 以 考虑 其 他 更 及 时 的 反馈 方式 ， 例 如 短 消 息 或 电话 等 ， 
在 非 工作 时 间 也 可 以 安排 值班 的 开发 人 员 专 门 解决 构建 错误 。 

8. 优先 修复 导致 构建 失败 的 缺陷 

无 法 集成 的 构建 是 失败 的 构建 ， 可 能 存在 编译 错误 ， 测 试 或 审计 失败 ， 也 有 可 能 是 部 


| 350 | Web 前 端 测试 与 集成 一 一 Jasmine/Selenium/Protractor/Jenkins 的 最 佳 实践 


署 问题 。 在 CI 环境 下 ， 这 些 问题 需要 优先 修复 ， 否 则 后 续 的 所 有 版 本 都 将 无 法 构建 ， 特 别 
是 编译 和 部 署 问题 会 直接 导致 无 法 生成 测试 报告 ， 使 项 目 经 理 无 法 跟踪 当前 的 项 目 进展 。 

实际 上 ， 频 繁 的 以 增 量 方式 提交 变更 ， 出 错 后 立刻 调查 是 最 容易 也 是 最 节省 时 间 的 
实践 。 


15.4 ”选择 持续 集成 工具 


目前 市 场 上 成 熟 的 CI 工具 很 多 ， 包 括 商 业 的 和 开源 的 。 在 选择 CI 工具 的 时 候 ， 并 不 一 
定 要 找 最 好 的 、 最 贵 的 ， 每 个 工具 都 有 自己 的 优点 和 不 足 ， 因 此 最 重要 的 是 找到 最 适合 自 
己 项 目的 工具 。 

在 进行 选择 决策 的 时 候 ， 如 果 公 司 内 已 经 有 了 正在 运行 的 CI 案例 ， 建 议 先 参考 现 有 案 
例 的 使 用 经 验 和 反馈 ， 结 合 新 项 目的 需求 看 其 是 否 符合 要 求 。 一 般 而 言 ， 如 果 需 求 基本 符 
合 ， 建 议 使 用 现 有 的 CI 工具 ， 无 论 是 使 用 经 验 还 是 排 错 方面 ， 都 会 大 大 节省 成 本 。 

如 果 考 虑 选择 新 的 CI 工具 ， 可 以 从 以 下 几 个 方面 权衡 : 

1. 功能 

CI 工具 的 功能 是 优先 需要 考虑 的 方面 ， 它 关系 到 对 项 目的 直接 支持 水 平 ， 例 如 处 理 构 
建 的 能 力 、 反 馈 报 告 的 种 类 等 。 

2. 可 靠 性 

如 果 一 个 CI 工具 功能 很 强大 ， 却 频频 引发 意外 死机 ， 无 疑 不 是 用 户 希 望 看 到 的 结果 ， 
因而 考量 CI 工具 的 可 靠 性 也 非常 重要 。 一 般 而 言 ， 用 户 数量 是 衡量 工具 软件 是 否 优秀 的 参 
照 指标 。 一 个 工具 软件 如 果 下 载 或 使 用 的 人 数 较 多 ， 往 往 说 明 其 比较 稳定 。 

3. 平台 

一 个 CI 工具 并 不 一 定 能 够 支持 所 有 的 平台 ， 有 些 工 具 可 以 运行 在 Windows 上 ， 而 有 些 
只 能 运行 在 Linux 上 ， 需 要 结合 软 硬 件 来 看 其 是 否 符合 本 公司 的 使 用 习惯 与 资源 条 件 。 

4. 易 用 性 

良好 的 易 用 性 可 以 节省 大 量 的 部 署 与 配置 时 间 ， 也 可 以 节省 使 用 者 的 学 习 时 间 。 

5. 可 扩展 性 

项 目 不 是 一 成 不 变 的 ， 可 能 开始 只 需要 用 JavaScript 和 C# 来 编程 ， 随 着 需求 的 变更 ， 
后 面 又 用 到 了 其 他 默认 不 支持 的 编程 语言 。 如 果 CI 工 具有 良好 的 扩展 性 ， 能 够 通过 插件 或 
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脚本 解决 此 问题 ， 无 疑 会 方便 很 多 。 
6. 版 本 控制 工具 的 支持 
CI 工具 需要 支持 项 目 里 用 到 的 版 本 控制 库 ， 否 则 集成 无 法 进行 。 表 15-1 列 出 了 一 些 常 
用 CI 工具 对 主流 版 本 控制 库 的 支持 情况 。 虽 然 Travis CI 和 CircleCI 当 前 只 支持 Git， 但 它们 
是 基于 云 服务 的 持续 集成 工具 ， 用 户 无 需 自己 维护 CI 工具 的 部 署 ， 因 此 目前 也 非常 流行 。 
表 15-1 常用 CI 工具 对 主流 版 本 控制 库 的 支持 情况 




















A 





持续 测试 是 CI 系统 的 核心 功能 ， 也 是 高 质量 发 布 的 保证 。 在 一 个 功能 完善 的 CI 系统 
中 ， 持 续 测试 必 不 可 少 。 单 元 测试 和 自动 化 测试 虽然 目的 都 是 检验 软件 的 实现 质量 ， 但 也 
有 各 自 的 独特 性 ， 本 章 将 基于 已 介绍 的 单元 测试 和 自动 化 测试 的 知识 ， 介 绍 如 何在 CI 系统 
中 实施 持续 测试 。 

本 章 将 介绍 : 

@ 测试 策略 
基于 Jenkins 的 持续 集成 
集成 Team Foundation Server 
集成 Visual Studio Team Services 
集成 Github 


16.1 测试 策略 


随 着 敏捷 开发 和 DevOps 实践 被 越 来 越 多 地 采用 ， 在 每 次 迭代 中 手动 触发 单元 测试 和 
自动 化 测试 已 经 成 为 不 可 持续 的 模式 。 大 量 时 间 消 耗 在 等 待 构建 上 、 缺 乏 足 够 的 灵活 性 ， 
都 会 降低 测试 回报 。 特 别 是 测试 反馈 速度 太 慢 会 显著 降低 生产 力 ， 而 较 高 的 测试 效率 恰恰 
是 跟 上 快 节奏 的 开发 生命 周期 的 一 个 关键 。 这 时 候 就 需要 引入 持续 测试 。 

通过 更 敏捷 的 测试 尽 可 能 地 找到 更 多 的 问题 ， 可 以 改善 测试 效率 。 持 续 测试 通过 提供 
实时 测试 和 及 时 反馈 ， 能 够 加 强 整 个 团队 的 信任 度 。 对 于 项 目 利益 相关 者 ， 持 续 测试 提高 
了 对 成 功 交 付 的 信心 。 对 于 开发 团队 ， 持 续 测试 最 小 化 了 测试 的 影响 范围 ， 这 可 能 能 够 减 
少 开发 成 本 ， 实 现 更 快 的 项 目 交付 ， 更 重要 的 是 ， 确 保 了 高 质量 、 可 靠 的 解决 方案 。 
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要 充分 发 挥 持续 测试 的 价值 ， 关 键 是 在 开发 的 生命 周期 中 更 早 、 更 频繁 地 进行 测试 。 
这 样 ， 团 队 就 可 以 尽早 地 测试 风险 最 大 的 元 素 ， 然 后 不 断 重 用 这 些 测 试用 例 。 测 试 的 同 
时 ， 尽 早 向 开发 团队 提供 代码 质量 的 迭代 式 反馈 ， 可 以 加 快 修复 缺陷 的 速度 ， 确 保 在 开发 
生命 周期 的 后 期 发 现 的 问题 更 少 。 特 别 是 单元 测试 ， 如 果 能 够 频繁 地 进行 ， 则 每 个 测试 版 
本 之 间 的 差异 会 很 小 ， 大 大 减少 与 发 布 相关 的 风险 。 为 了 做 到 尽早 、 更 频繁 地 进行 单元 测 
试 ， 任 何 一 次 代码 变更 都 应 该 触发 构建 和 反馈 流程 ， 单 元 测试 一 般 运行 速度 很 快 ， 可 以 让 
开发 人 员 尽 早 得 到 测试 结果 。 

为 了 提高 单元 测试 和 自动 化 测试 的 效率 ， 对 于 没有 相互 影响 的 测试 用 例 可 以 使 用 并 行 
的 方式 驱动 ， 前 面 章节 介绍 的 Karma 和 Protractor 都 能 够 支持 并 行 测试 。 

与 单元 测试 不 同 ， 自 动 化 测试 需要 将 产品 部 署 后 模拟 用 户 对 其 操作 进行 功能 上 的 检 
查 。 无 论 是 部 署 还 是 自动 化 测试 本 身 ， 一 般 都 耗 时 较 长 ， 反 馈 时 间 相 应 会 比较 晚 。 所 以 ， 
在 构建 时 应 该 先 执行 较 快 的 测试 即 单元 测试 ， 保 证 开发 人 员 尽 快 得 到 反馈 。 另 外 ， 自 动 化 
测试 不 仅 构建 时 间 长 ， 对 测试 资源 〈 例 如 Selenium Server) 的 消耗 也 更 多 ， 即 便 有 些 公司 
使 用 了 虚拟 化 技术 实时 创建 虚拟 机 作为 测试 环境 ， 仍 然 可 能 存在 资源 不 够 的 情况 。 所 以 ， 
区 别 于 单元 测试 ， 不 建议 每 次 代码 变更 都 触发 自动 化 测试 ， 而 可 以 考虑 在 每 个 新 版 本 发 布 
后 进行 自动 化 测试 或 在 每 天 的 一 个 固定 时 间 同 步 最 新 代码 进行 每 日 构建 ， 这 也 叫 作 Daily 
Build。 

基于 Protractor 的 自动 化 测试 不 建议 直接 运行 在 构建 工具 或 CI 服务 器 上 ， 因 为 在 同一 台 
机 器 上 安装 多 种 浏览 器 不 仅 不 能 提高 测试 效率 ， 反 而 会 让 CI 服务 器 功能 发 散 ， 难 以 维护 。 
很 难 想象 每 次 浏览 器 出 了 新 版 本 后 还 要 到 各 个 CI 服务 器 上 进行 更 新 。 所 以 ， 集 成 环境 内 的 
自动 化 测试 建议 考虑 基于 Selenium Grid 或 Sauce Labs 等 云 服 务 通过 分 布 式 测试 进行 集成 。 

另外 ， 自 动 化 测试 不 可 能 覆盖 到 所 有 的 用 户 使 用 情况 ， 也 无 法 测试 经 由 系统 内 的 所 有 
路 径 ， 尝 试 这 么 做 的 成 本 只 会 最 后 大 大 超过 收益 。 所 以 ， 无 论 是 从 编写 测试 用 例 的 成 本 而 
言 ， 还 是 从 测试 的 效率 考虑 ， 都 应 该 让 自动 化 测试 用 例 尽 可 能 多 地 覆盖 最 重要 和 最 常用 的 
使 用 场景 ， 而 不 是 刻意 地 面面俱到 。 这 样 才能 让 持续 集成 的 效果 更 好 ， 价 值 更 高 。 


16.2 基于 Jenkins 的 持续 集成 


在 众多 的 CI 工具 中 ，Jenkins 因 其 完善 的 功能 和 强大 的 社区 支持 ， 得 到 了 广泛 的 关注 和 
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使 用 ， 是 当前 最 流行 的 CI 工具 之 一 。 
Jenkins 的 前 身 是 Hudson， 由 当时 还 在 Sun 的 Kohsuke Kawaguchi 及 其 团队 进行 研发 。 在 
Oracle 收 购 Sun 之 后 ， 开 源 社区 于 2011 年 1 月 通过 投票 ， 决 定 将 Hudson 项 目 更 名 为 Jenkins。 
以 下 为 Jenkins 的 主要 特点 : 


免费 而 且 开 源 。Jenkins 是 一 个 完全 免费 的 CI 工具 ， 其 源 代 码 完全 公开 于 GitHub。 
丰富 的 学 习 资 料 。Jenkins 因 为 其 开放 的 特性 得 到 了 社区 的 大 力 支持 ， 可 以 很 方便 
地 查找 到 需要 的 学 习 资 料 。 


@ 容易 安装 与 配置 ， 无 需 专门 的 数据 库 即 可 运行 。 


支持 分 布 式 构建 。 通 过 Master 和 Slave 模 式 ，Jenkins 可 以 把 构建 任务 轻松 地 分 发 到 
多 个 Slave 上 。 
跨 平台 。Jenkins 几 乎 支持 所 有 的 平台 ， 包 括 Windows、Ubuntu、Fedora 和 CentOS 等 。 


@ 可 读 的 永久 链接 。Jenkins 对 于 大 部 分 页 面 都 可 生成 永久 链接 ， 方 便 其 他 地 方 进行 


引用 。 

良好 的 扩展 性 。Jenkins 拥 有 强大 的 插件 框架 ， 通 过 大 量 的 插件 ， 可 以 支持 几乎 所 
有 技术 类 型 的 持续 集成 。 

稳定 的 产品 线 。Jenkins 的 产品 线 稳 定 ， 通 过 大 概 每 三 个 月 发 布 的 Long-Term 
Support (LTS) 版 本 提供 最 稳定 的 功能 。 


Jenkins 是 一 个 基于 Java 开 发 的 工具 ， 在 使 用 前 请 先 参考 12.1.1 节 安装 Java JDK。Jenkins 
的 安装 非常 简单 ， 从 网 址 https://jenkins.io/index.html 处 下 载 jenkins.war 并 保存 到 服务 器 后 ， 
即 可 在 命令 控制 台 执行 以 下 命令 启动 Jenkins 服 务 ( 参 见 图 16-1〉。 


java -jar jenkins.war -httpPort=8080 


Jenkins 也 支持 HTTPS， 可 以 使 用 参数 httpsPort， 并 提供 证 书 进行 配置 了 ?。 另 外 ， 在 
Windows 平 台 ，Jenkins 也 可 以 通过 传统 的 安装 包 将 其 安装 为 Windows 服 务 ， 这 样 每 次 机 器 
重启 后 Jenkins 也 会 自动 启动 。 

图 16-2 为 启动 后 的 Jenkins 主 界面 ， 左 侧 的 导航 栏 是 Jenkins 主 要 功能 的 入 口 ， 例 如 New 
Item 用 于 创建 Jenkins 构 建 项 ，People 定 义 了 Jenkins 内 的 账号 ，Build History 用 于 查看 构建 历 
史 等 ; 右 侧 是 已 经 创建 好 的 构建 项 。 


人 Jenkins. Starting and Accessing Jenkins[OL]. [2016]. https://wiki.jenkins-ci.org/display/JENKINS/ 
Starting+and+Accessing+Jenkins. 
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图 16-2 ”Jenkins 主 界面 


对 Jenkins 的 绝对 大 多 管理 工作 都 是 通过 Manage Jenkins 导 航 栏 进入 的 ， 如 图 16-3 所 
示 。 其 中 ，Configure System 项 用 于 配置 全 局 内 有 效 的 设置 ，Global Tool Configuration 用 于 


配置 集成 所 用 工具 的 路 径 和 安装 ， 
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Manage Plugins 用 于 安装 卸载 Jenkins 插 件 等 。 


Manage Jenkins 





16-3 ”管理 Jenkins 
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在 下 一 节 笔 者 将 介绍 配置 Jenkins 的 方法 ， 为 了 让 其 与 TFS 的 Git 代 码 仓库 同步 代码 ， 所 
以 需要 先 安装 Git 并 在 Global Tool Configuration 中 配置 Git 的 安装 路 径 ， 如 图 16-4 所 示 。Git 
安装 包 可 以 从 网 址 https://git-scm.com/downloads 处 下 载 得 到 。 


Git 
Git installations 
Git 


De Defauit 


Path to Git executable CnProoram Fies\Gitibinigit exe 四 
Install automaticaly 加 
AddGit 下 
图 16-4 配置 Git 


在 后 续 章节 中 ， 将 进一步 以 Jenkins 为 例 展示 如 何 通 过 持续 集成 驱动 单元 测试 和 自动 化 
测试 。 持 续集 成 的 其 他 功能 包括 软件 和 数据 库 的 部 署 等 ， 基 于 不 同 的 技术 与 产品 ， 其 构建 
方式 也 相应 不 同 ， 如 果 读 者 有 兴趣 ， 建 议 参 考 专 门 的 部 署 书籍 进一步 学 习 。 


16.3 集成 Team Foundation Server 


Team Foundation Server (TFS) 是 微软 公司 发 布 的 软件 开发 生命 周期 管理 套件 ， 除 了 
版 本 控制 和 源 代码 管理 外 ，TFS 还 具有 工作 项 跟踪 、 产 品 发 布 和 集成 SharePoint 等 功能 ， 是 
Windows 平 台 上 使 用 最 广泛 的 开发 管理 工具 之 一 。TFS 的 数据 仓库 基于 SQL Server 建 立 ， 
存储 工作 项 跟踪 、 源 代码 管理 、 版 本 和 测试 工具 的 数据 。 

TFS 项 目 管理 、 配 置 等 工作 可 以 通过 Web 管 理 页 面 进行 ， 功 能 强大 ， 简 单 易学 ， 本 书 
后 续 演示 基于 TFS 2015 Update 3 进行 。 尽 管 将 TFS 安 装 到 Windows 域 环境 内 对 用 户 管理 会 
方便 很 多 ， 但 这 并 不 是 必须 条 件 。 


16.3.1 创建 项 目 


使 用 TFS 创 建 项 目的 步骤 如 下 : 
(1) TFS 的 项 目 管理 界面 是 一 个 运行 在 浏览 器 环境 下 的 Web 应 用 ， 单 击 New team 
project 项 创建 一 个 新 项 目 。TFS 支 持 Team Foundation Version Control 和 Git 两 种 版 本 管理 的 
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16-5 所 示 ， 选 择 Git 选 项 创建 项 目 TestProject。 
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图 16-5 创建 新 项 目 
(2) 创建 好 项 目 后 ， 即 可 得 到 其 访问 链接 ， 如 图 16-6 所 示 。 


[ea] 





Visual Studio 





| Studi Download Visual Studio 


Command line or another Git client 
Clone Url 


HTIPISSH | TH 中 


Download Git for Windows 


Plug-ins and credential managers 


These provide the best experience with single sign in, multi-factor 
auth, and integration with pull requests. 


2 ® SS 


Intelly AndroidStudio Edipse Windows command line 














图 16-6 项 目的 Git 访 问 链接 
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16.3.2 从 Visual Studio Code 提 交 变 更 


TFS 下 的 Git 版 本 控制 实际 是 一 个 基于 HTTP 的 服务 ， 包 括 Visual Studio 等 任何 支持 Git 
的 IDE 均 可 以 访问 使 用 。 从 Visual Studio Code 提 交 变更 的 步骤 如 下 : 
(1) 如 果 使 用 Visual Studio Code 作 为 项 目的 客户 端 编辑 工具 ， 需 要 先 通过 上 节 获 得 






































的 Git 访 问 链接 将 项 目 克 隆 到 本 地 ， 如 图 16-7 所 示 。 同 时 ， 需 要 使 用 git config 配 置 用 户 名 和 
B 件 。 











0 





图 16-7 ”克隆 项 目 到 本 地 
(2) 在 客户 端 完 成 代码 编辑 后 ， 单 击 Commit All 按 钮 将 修改 提交 到 本 地 Git， 如 图 
16-8 所 示 。 





GIT 


Update source code 


CHANGES 

田 .bowerrc 
ue 
bowerjson 
karma.confjs 
packagejson 


app.animations.css app 


app.animationsjs 


图 16-8 ”将 修改 提交 到 本 地 Git 
(3) 如 图 16-9 所 示 ， 单 击 … 按 钮 ， 选 择 Push 命 令 把 本 地 的 变更 同步 到 TFS 的 Git 代 码 
仓库 。 
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CHANGES 





图 16-9 ”推送 到 TFS 


16.3.3 ”配置 TFS 插 件 


Jenkins 之 所 以 强大 ， 源 于 其 优秀 的 可 扩展 性 和 对 大 量 插件 的 支持 。 配 置 TFS 插 件 的 步 
又 如 下 : 

(1) 为 了 将 Jenkins 与 TFS 集 成 起 来 ， 选 择 Manage Plugins 选 项 进入 插件 管理 界面 ， 这 
里 列 出 了 所 有 可 供 下 载 的 、 已 安装 的 和 可 以 更 新 的 插件 。 如 图 16-10 所 示 ， 在 可 供 下载 的 


页 面 中 搜索 并 安装 Team Foundation Server Plug-in 插 件 。 








才 Jenkins DJenkinsAdmin 1iog out 
Jenkins =» Plugin Manager 
对 Back to Dashboard 
Fikter: team four x 
Manage Jenkins 
Available 
Update Center 
Install 上 Name Version 
Team Foundat 





and 5.2.1 





口 Thisp ns with Visual Studio Team FF 
d Team Foundation Version Control: 





oe omaton outained 


图 16-10 ”安装 TFS 插 件 
(2) 在 Configure System 内 配置 有 已 经 安装 好 的 TFS 插 件 ， 包 括 工作 集合 的 地 址 以 及 
Jenkins 用 来 访问 的 账户 ， 如 图 16-11 所 示 。 
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TFS/Team Services 


Team Project Collections 

Collection URL | ttp.//tfsserver-8080/tfs/defaultcollection 

Credentials & [TostUser » | ES 
Depending on the integration features used the user account or 
personal access token may need code read code_status 
and/or work_write permissions 

Test connection 
Add 


Enable Push Trigger for all jobs 


Tuming this on is equivalent to adding the Build when a change ls pushed to TFS/Team 
Services trigger to all jobs 


图 16-11 配置 TFS 插 件 


16.3.4 ”创建 并 配置 Jenkins 构 建 项 


Jenkins 的 集成 工作 是 通过 构建 项 进行 的 ， 创 造 及 配置 Jenkins 构 建 项 的 步骤 如 下 : 

(1) 在 Jenkins 主 页 选择 New Item 选 项 ， 可 以 看 到 有 多 种 构建 类 型 供 选 择 ， 包 括 
Freestyle project、Pipeline 和 External Job 等 。 如 图 16-12 所 示 ， 选 择 Freestyle project 选 项 并 将 
构建 项 命名 为 UnitTestDemo。 该 选项 也 是 Jenkins 里 使 用 最 普遍 的 构建 选项 。 


JenkinsAdmin ~ | log out 





Jenkins Al 


Enter an item name 


UnitTestDemo 


» Required field 


2 Freestyle project 
This is the central feature of Jenkins. Jenkins wil build your project, combining any SCM with 
any build system, and this can be even used for something other than software build 


人 





Pipeline 

Orchestrates long-running activilies that can span muliple build slaves Suitable for building 
pipelines (formerly known as workflows) and/or organizing complex activities that do not easily 
in free-style job type 


External Job 
a remote machine. This Is designed so that you can use Jenkins as a dashboard of your 


图 16-12 ”创建 构建 项 
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(2) 在 TFS 服 务 器 中 打开 项 目 管理 界面 ， 该 界面 用 于 配置 所 有 与 项 目 相关 的 工作 ， 
如 图 16-13 所 示 。 





Control panel > Defaultc 
Iterations el Version Control Serwce Hooks 
Project profile Teams 
Newteam | © 

TeamName ~ Members Description 

置 Testproject Team 3 The default project team. 
Name 
Testproject 


图 16-13 ”TFS 项 目 管理 界面 
(3) 切换 到 Service Hooks 页 面 ， 如 图 16-14 所 示 。Service Hooks 页 面 提供 了 集成 接 
口 ， 让 TFS 可 以 在 新 代码 提交 或 构建 完成 后 通知 第 三 方 服务 执行 下 一 步 任务 。 注 意 ， 这 
些 服务 并 不 局 限于 持续 集成 工具 ， 只 要 其 遵守 TFS 集 成 接口 协议 均 可 。 单 击 Create a new 
subscription 按 钮 创建 一 个 新 的 集成 任务 。 


Control panel > DefaultCollection > TestProject 


Dverview lterations Areas Security Version Control Service Hooks Services 





Service Hooks 


tegrate with your favorite services by notifying them when events happen in your project. 
Create 4 new subscription. 


+ ss © Xx History 


Consumer “ Event Fikters Action Settings 
- Code pushed Any branch on any repository. Trigger generic build Server jenlinsserver, 
Jenkins Build completed Any completed build. Trigger generic build server jenkinsserver, 


图 16-14 ”Service Hooks 页 面 
(4) 如 图 16-15 所 示 ， 在 Service 页 面 选择 Jenkins 选 项 ， 表 示 将 与 Jenkins 进 行 集成 。 
(5) 如 图 16-16 所 示 ， 在 Trigger 页 面 选择 触发 类 型 为 Code pushed， 表 示 任 何 一 次 代码 
变更 都 会 通知 到 Jenkins。 另 外 ， 也 可 以 选择 Build completed 表 示 一 个 版 本 构建 完成 。 
(6) 如 图 16-17 所 示 ， 在 Action 页 面 内 输入 Jenkins 服 务 的 地 址 ， 用 于 访问 Jenkins 的 用 
户 名 、 密 码 以 及 对 应 的 构建 项 名 称 。 
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NEW SERVICE HOOKS SUBSCRIPTION x 


Service 


Select a service to integrate with. Discover more integrations 





Azure Service Bus A| Jenkins 
Azure Storage Jenkins is an open source continuous 

integration service popular with Java teams. 
Bamboo 

Supported events: 
Campfire «Build completed 
Flowdock “Code pushed 
HipChat Supported actions: 

- 。Trigger generic build 
Jenkins » Trigger Git build 
kato Learn more about this service 
Slack 
Trello 
Web Hooks 
v 
Zendesk 
Previou Next Test Finish Cancel 
4 
图 16-15 选择 第 三 方 服务 

EDIT SERVICE HOOKS SUBSCRIPTION x 


Trigger 


Select an event to trigger on and configure any filters. 


Trigger on this type of event 
Code pushed by 


各 Remember that selected events are visible to users of the target service, 
even if they don't have permission to view the related artifact 
FILTERS 


Repository © 
[Any] - 


Branch O 
[Any] 


Pushed by a member of group: ©O 
[Any] 四 


Previous Next Test Finish Cancel 


图 16-16 ”选择 Trigger 类 型 
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EDIT SERVICE HOOKS SUBSCRIPTION x 


Action 入 


Select and configure the action to perform. 


Perform this action 
Trigger generic build ~ 
Triggers a generic Jenkins build, invoking the Jenkins build URL Secure, 


HTTPS endpoints are recommended due to the potential for private data in 
the event payload. Learn more 


SETTINGS 


Jenkins base URL © 
httpVWienkinsserver8080 v 
Username © 


admin Vv 


User APl token (or password) © 


worseonee bd 








Build © 
UnitTestDemo -Vv 
Build token © 
Y 
Previous " Test Finish Cancel 
语 


图 16-17 配置 Jenkins 访 问 地 址 
(7) 建议 读者 在 每 次 创建 或 修改 通知 服务 时 ， 先 在 Action 页 面 单 击 Test 按 钮 检验 配置 
是 否 正 确 。 如 图 16-18 所 示 ， 如 果 有 403 错 误 发 生 ， 请 在 Jenkins 的 Configure Global Security 
控制 页 面 内 取消 勾 选 Prevent Cross Site Request Forgery exploits 选 项 并 再 次 测试 。 
TEST NOTIFICATION x 


Jenkins (Trigger generic build) 


Summary Request Response Event 
@ Failed 
Sent on Wednesday, December 21, 2016 3:41:10 PM (China Standard Time) 


Message 
Jamal Hartnett pushed updates to branch master of repository Fabrikam-Fiber-Git. 


Error Message 
No valid crumb was included in the request (403) 
Close 


图 16-18 ”出 现 403 测 试 失 败 信息 
(8) 如 图 16-19 所 示 ， 测 试 成 功 表示 从 TFS 到 Jenkins 构 建 项 的 通知 工作 正常 。 
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TEST NOTIFICATION x 


Jenkins (Trigger generic build) 


Summary Request Response Event 


加 succeeded 
Sent on Wednesday, December 21, 2016 3:43:23 PM (China Standard Time) 


Message 
Jamal Hartnett pushed updates to branch master of repository Fabrikam-Fiber-Git. 


Close 


图 16-19 ”成功 连通 


16.3.5 ”集成 单元 测试 


集成 单元 测试 的 步骤 如 下 : 
(1) 回 到 Jenkins 服 务 器 ， 在 创建 好 的 构建 项 UnitTestDemo 中 ， 找 到 Source Code 
Management 页 面 ， 设 置 TFS 代 码 仓库 的 访问 链接 和 访问 账号 ， 如 图 16-20 所 示 。 
Source Code Management 


None 


® Gn 
Repostonos 
Repository URL ”http /tfsserver 8080/fs/DefaultCollecton/TestProject_gWTestpr | 加 
Crodontiak Testusenw » | Wm Add 
Advanced. 
Add Repository 
Branches to buld [x 
Branch Specifier (blank for ‘any’) /master 大 
Add Branch 


图 16-20 配置 源 代码 管理 
(2) Jenkins 的 构建 项 可 以 基于 不 同 的 事件 实现 触发 ， 例 如 在 其 他 项 目 构建 完成 后 触 
发 、 周 期 性 触发 等 。 作 为 单元 测试 ， 用 户 希望 在 每 次 有 新 代码 提交 到 TFS 后 都 进行 构建 。 
如 图 16-21 所 示 ， 选 择 Build when a change is pushed to TFS/Team Services 触 发 类 型 。 
(3) 完整 的 构建 任务 是 由 多 个 Build 任 务 以 定义 好 的 顺序 构成 的 。 单 击 Add build step 
按钮 可 以 添加 多 个 Build 任 务 。 图 16-22 所 示 为 按 先 后 顺序 调用 npm install 和 npm run unit-test 
命令 进行 单元 测试 。 
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Build Triggers 


Trigger builds remotely (e.g., from scripts) 
Build after other projects are built 
Build periodically 
Build when a change is pushed to GitHub 
Build when a change is pushed to TFS/Team Services 
Poll SCM 


图 16-21 选择 触发 类 型 


Build 
Execute Windows batch command 区 
Command | npm install 
See the list of avallable environment variables 


Execute Windows batch command 


Command npm run unit-test 


See the list of available environment variables 


Add build step ~ 


图 16-22 单元 测试 中 的 Build 任 务 





在 npm 脚 本 中 将 npm install 配 置 为 preunit-test 任 务 ， 可 以 在 Jenkins 里 省 略 对 npm 


® 充分 利用 gulp 和 npm 脚 本 进行 构建 ， 可 以 简化 Jenkins 构 建 项 的 配置 。 例 如 
install 的 调用 。 





(4) 完成 并 保存 设置 后 ， 如 果 有 任何 新 的 代码 变更 被 提交 到 TFS， 都 会 触发 Jenkins 
构建 项 。 如 图 16-23 所 示 ， 在 Build History 列 表 里 可 以 看 到 已 经 完成 和 正在 进行 的 构建 。 

(5) 测试 支持 多 种 报告 格式 ， 其 中 JUnit 报 告 被 广泛 用 于 持续 集成 中 ， 用 于 查看 测试 
结果 。 为 了 在 Jenkins 中 使 用 JUnit， 首 先 需 要 安装 Junit Plugin 插 件 〈 请 参考 16.3.3 节 中 Team 
Foundation Server Plug-in 的 安装 过 程 ) 。 安 装 完成 后 ， 如 图 16-24 所 示 ， 即 可 在 构建 项 内 通 
过 单 击 Add post-build action 按 钮 创建 Publish JUnit test result report 任 务 ， 并 根据 Karma 中 的 
配置 项 ， 指 定 对 应 JUnit 报 告 的 保存 路 径 与 文件 名 。 完 成 以 上 配置 后 ，Jenkins 将 能 够 识别 
测试 生成 的 JUnit 报 告 ， 并 将 其 纳入 到 构建 结果 中 。 
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Build History trend 一 





-| 
已 





GO #7 Dec 22.2016 1128 AM 日 
@ #36 Dec 22,2016 1120 AM 
@ #35 Dec 22,2016 3:01 AM 
@ #34 Dec 21,2016 1134 PM 
@ #3 Dec21,2016 1129 PM 
@ #32 Dec 21,2016 11:12 PM 
@ #1 Dec21,2016 11:03 PM 
@ #0 Dec 21,2016 10-48 PM 
图 16-23 ”构建 历史 列表 
Publish JUnit test result report 区 可 可 
Test report XMLs appreport_outputjunitreport xml 
Fileset 'includes' setting that specifies the generated raw XML report 
flles, such as ,myprojecVtargetWtest-reports/" xml. Basedir of the 
flleset is the workspace root. 
占 Retain long standard outputerror © 
Health report amplification factor 1.0 加 
1% failing tests Scores as 99% health. 5% failing tests Scores as 95% 
health 
Allow empty results 加 Do not fail the build on empty test results © 


Add post-build action 


图 16-24 ”单元 测试 中 集成 JUnit 报 告 


(6) 如 图 16-25 所 示 ， 单 元 测试 内 的 每 个 测试 用 例 都 被 成 功 验证 。 测 试用 例 的 任何 错 
误 都 会 导致 构建 失败 。 


会 Backto Project 


Test Result : (root) 

















Q seus 
es apmures (20) 
a Changes 
Ej 5 tests (40) 
国 consoe output Took sg ms 
ad qescriptan 
区 EdtBuid information Bs 
马 *eoy All Tests 
雹 steuldpaa 
Duraton Fal (MSkp anPass (am Total (am 

加 nos roms o o 1 1 
态 Hm report cneckmark 7oms o o 1 1 

pnoneDetal 7oms o 1 1 
园 estkesur 

pnoneust Toms o o 2 2 





重 Prevous Buid 


路 NextBuid 





6-25 ”单元 测试 结果 
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(7) 除了 JUnit 报 告 ， 在 安装 了 插件 HTML Publisher plugin 后 〈 请 参考 16.3.3 节 中 的 安 
装 过 程 ) ，Jenkins 还 可 以 支持 HIML 报告 ， 如 图 16-26 所 示 。 


Publish HTML reports © 
Repors EE 
HTML directory to archive «app/report_output © 
Index pagefs] unit html © 
Report tle HTML Report © 


和 Publishing options... 


Add 
图 16-26 ”单元 测试 中 集成 HTML 报 告 


(8) 在 Jenkins 内 查看 单元 测试 生成 的 HTML 报告 ， 如 图 16-27 所 示 。 
€ GG | © jenkinsserver808 


o/67/HTML_Report 





Back to UnitTestDemo unit 


5 specs, 0 failed, 0 pending 


checkmark 
should convert boolean values to unicode checkmark or cross 


Phone 
should fetch the phones data from */phones/phones.json 


phoneDetai1 PhoneDetailController 
should fetch the phone details 


phoneList PhoneListController 
should create a “phones” property with 2 phones fetched with ‘Shttp 
should set a default value for the “orderProp” property 


图 16-27 显示 HTML 报 告 
基于 最 近 若 干 次 的 构建 结果 ，Jenkins 会 以 不 同 的 天 气 状 态 形象 地 表达 构建 的 稳定 指 
数 ?， 如 表 16-1 所 示 。 这 个 功能 使 项 目 经 理 可 以 一 目 了 然 地 了 解 当前 的 构建 状态 ， 并 对 下 
一 步 进 展 作 出 预测 。 


表 16-1 ”构建 稳定 状态 
状态 描 述 








最 近 没有 构建 失败 





20~40% 的 构建 失败 











@® Jenkins. Dashboard View[OL]. [2016]. https://wikijenkins-ci.org/display/JENKINS/Dashboard+ View. 
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( 续 表 ) 








CN 40_60%6 的 构建 失败 


全 60~80% 的 构建 失败 
0 4 
| 所 有 构建 均 失 败 


16.3.6 ”集成 自动 化 测试 

















自动 化 测试 与 单元 测试 的 主要 区 别 是 前 者 需要 对 软件 进行 部 署 后 才能 进行 ， 而 且 测 试 
用 例 本 身 执行 速度 比较 慢 。 在 这 种 情况 下 ， 如 果 每 次 更 新 代码 都 触发 一 次 自动 化 测试 则 代 
价 太 高 ， 一 方面 从 构建 服务 器 的 性 能 考虑 不 太 现 实 ， 同 时 也 没有 必要 。 

很 多 快速 欠 代 的 项 目 采 取 的 方法 是 每 日 构建 ， 即 一 般 安 排 在 晚上 10 点 到 12 点 之 间 出 一 
个 新 的 版 本 。 之 所 以 选择 这 个 时 间 段 是 因为 这 个 时 候 大 多 数 员工 已 经 下 班 ， 代 码 提 交 量 偏 
少 ， 是 一 个 比较 好 的 执行 构建 的 窗口 。 当 然 ， 对 于 某 些 全 球 性 项 目 ， 如 采用 中 国 、 欧 洲 、 
美洲 等 不 同时 区 接力 式 开 发 模式 的 项 目 ， 项 目 组 可 以 根据 自己 的 实际 情况 灵活 选择 适合 的 
时 间 窗 口 。 

进行 每 日 构建 既 可 以 在 TFS 内 完成 ， 然 后 通过 Build completed 事 件 触发 Jenkins 的 构建 
项 ， 也 可 以 直接 在 Jenkins 内 基于 预定 义 的 构建 时 间 进 行 主动 式 触 发 。 在 创建 好 自动 化 测试 
构建 项 时 ， 与 单元 测试 类 似 ， 需 要 先 设置 好 Git 访 问 链接 等 选项 。 

为 了 实施 每 日 构建 ， 需 要 在 Jenkins 的 Build Triggers 页 面 内 选择 Build periodically 选 项 并 
指定 构建 时 间 ， 格 式 与 cron 表 达 式 类 似 。 如 果 读 者 经 常 使 用 Linux， 可 能 对 Linux 里 的 cron 
计划 任务 非常 熟悉 ， 它 会 根据 命令 和 执行 时 间 来 按时 执行 调度 任务 。 

Jenkins 的 时 间 计 划 由 5 个 参数 构成 ， 中 间 以 空格 隔 开 ， 按 顺序 依次 为 : 

@ MINUTE: 代表 分 钟 ， 取 值 范围 是 0 一 59。 

@ HOUR: 代表 小 时 ， 取 值 范围 是 0 一 23。 

@ DOM: 代表 某 天 在 当月 内 的 数值 ， 取 值 范围 是 1 一 31。 

@ MONTH: 代表 月 ， 取 值 范围 是 1 一 12。 

@ DOW: 代表 某 天 在 一 个 星期 内 的 数值 ， 取 值 范围 是 0 一 7， 其 中 0 和 7 都 代表 星期 天 。 

如 果 需 要 指定 多 个 值 ， 可 以 采用 如 下 操作 数 〈 优 先 级 从 上 到 下 ) : 
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*: 适 配 所 有 有 效 的 值 ， 若 不 指定 某 一 项 ， 则 以 * 占 位 。 
M-N: 适 配 值 域 范围 ， 例 如 7-10 代 表 7-/8/9/10 均 满足 。 
ML-NVX 或 */X: 以 义 作 为 间隔 。 
A，B，C: 枚 举 多 个 值 。 
另外 ， 为 了 避免 多 个 任务 在 同一 时 刻 同 时 触发 构建 ， 可 以 指定 在 某 个 时 间 段 内 进行 
触发 ， 需 要 配合 使 用 H 字 符 。 添 加 H 字 符 后 ，Jenkins 会 在 指定 时 间 段 内 随机 选择 一 个 时 间 
点 作为 起 始 时 刻 ， 然 后 加 上 设 定 的 时 间 间 隔 ， 计 算得 到 后 续 的 时 间 点 。 到 下 一 个 周期 后 ， 
Jenkins 又 会 重新 随机 选择 一 个 时 间 点 作为 起 始 时 刻 ， 依 次 类 推 。 
为 了 便于 理解 ， 以 下 举例 说 明 。 
@ 0****， 代表 每 个 小 时 的 第 0 分 钟 。 
® H/15 * ***， 代表 每 隔 15 分 钟 ， 并 且 开 始 时 间 不 确定 。 例 如 这 个 小 时 可 能 分 别 是 
08、23、38 和 53， 而 下 个 小 时 可 能 是 02、17、32 和 47。 
@ H(0-29)/10 ****，, 代表 前 半 小 时 内 每 隔 10 分 钟 ， 并 且 开 始 时 间 不 确定 。 例 如 这 个 
小 时 可 能 分 别 是 04、14、24， 而 下 一 个 小 时 可 能 是 09、19 和 29。 
@ H23**1-5: 工作 日 每 晚 23:00 至 23:59 之 间 的 某 一 时 刻 。 
在 本 示例 中 ， 如 图 16-28 所 示 ， 设 置 触发 时 间 段 为 H(0-29) 23 * * 1-5， 即 每 个 工作 日 晚 
上 23 点 前 半 小 时 内 的 某 一 时 刻 。 


Build Triggers 


) Trigger bullds remotely (e.g., from scripts) 
) Bulld after other projects are bullt 


国 Build periodically 


Schedule H(0-29) 23** 1-5 


图 16-28 ”设置 触发 时 间 

使 用 Protractor 驱 动 自动 化 测试 带 来 的 一 大 好 处 是 其 技术 栈 与 Karma 完 全 一 致 ， 它 们 都 
是 基于 Nodejs 的 ， 都 可 以 通过 gulp、Grunt 进 行 构建 ， 也 都 可 以 集成 到 npm 脚 本 内 。 这 样 ， 
在 实施 自动 化 测试 集成 的 时 候 可 以 复 用 单元 测试 的 知识 ， 在 部 署 完 后 使 用 类 似 的 选项 配置 
自动 化 测试 。 

如 图 16-29 所 示 ， 与 单元 测试 类 似 ， 可 以 直接 通过 npm 脚 本 运行 自动 化 测试 。 同 样 ， 
如 图 16-30 所 示 ， 也 可 以 在 自动 化 测试 中 集成 HTML 报 告 ， 只 需要 将 对 应 路 径 配 置 正确 
即 可 。 
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Execute Windows batch command ‘ 
Command npm run e2e-test 
图 16-29 向 自动 化 测试 中 添加 Build 任 务 
Publish HTML reports EE 
Reports EE 
HTML directory to archive ”app/report_output © 
Index pagels] e2e html © 
Report ttle HTML Report © 


卫 Publishing options... 


图 16-30 ”在 自动 化 测试 中 集成 HTML 报 告 
需要 注意 的 一 点 是 ， 自 动 化 测试 是 一 个 消耗 测试 资源 的 耗 时 过 程 ， 不 建议 直接 在 
Jenkins 服 务 器 上 运行 Selenium Server 进 行 测试 ， 而 是 采用 Selenium Grid 或 Sauce Labs 等 云 服 
务 进行 远程 分 布 式 测试 。 


16.3.7 ”邮件 反馈 


Jenkins 可 以 将 构建 结果 反馈 给 开发 人 员 ， 为 了 支持 邮件 反馈 ， 首 先 需 要 在 Configure 
System 里 设置 System Admin e-mail address， 然 后 设置 E-mail Notification 选 项 ， 包 括 SMTP 
服务 器 、 账 号 及 密码 等 ， 如 图 16-31 所 示 。 

另外 ，Jenkins 还 支持 增强 版 的 Extended E-mail Notification"， 相 比较 而 言 它 的 功能 更 强 
大 ， 可 以 定制 邮件 列表 、 文 本 内 容 ， 发 送 后 执行 脚本 等 。 同 时 ， 它 还 支持 多 种 触发 条 件 ， 
很 适合 对 邮件 定制 要 求 较 高 的 项 目 ， 如 图 16-32 所 示 。 

配置 好 邮件 策略 后 ， 即 可 在 对 应 的 构建 项 中 单 击 Add post-build action 按 钮 添加 Editable 
E-mail Notification 任 务 完成 邮件 反馈 的 配置 。 

TEFS 和 Jenkins 在 持续 集成 开发 测试 中 使 用 广泛 ， 功 能 强大 ， 本 书 所 介绍 也 只 是 其 冰山 
一 角 。 建 议 读者 在 实践 中 不 断 摸索 ， 找 到 最 适合 自己 项 目 所 用 技术 的 配置 与 实现 办 法 。 


E-mail Notification 


SMTP server 


Default user e-mail suffix 


国 Use SMTP Authentication 


User Name 


Password 


Use SSL 


SMTP Port 


Reply-To Address 


Charset 


第 16 章 





smtp.contoso com| 


@contoso com 


testadmin@contoso com 





465 


testadmin@contoso com 


UTF-8 


Test configuration by sending test e-mall 


Apply 


图 16-31 配置 邮件 反馈 


Aborted 

Always 

Before Buld 

Fallure - 1st 

Failure - 2nd 

Fallure - Any 

Failure - St 名 

Failure - X 

Failure -> Unstable (Test Failures) 
Fixed 

Not Built 

Script - After Build 

Script - Before Build 

Status Changed 

Success 

Test Improvement 

Test Regression 

Unstable (Test Failures) 
Unstable (Test Failures) - 1st 
Unstable (Test Fallures) - St 
Unstable (Test Failures)/Failure -> Success 


16-32 ”邮件 反馈 触发 类 型 





持续 测试 | 371 | 


图 ® 


图 


图 


16.4 集成 Visual Studio Team Services 


Visual Studio Team Services (VSTS) @ 的 前 身 即 Visual Studio Online， 是 微软 基于 云 计 


人 ”Microsoft Visual Studio Team Services[OL]. [2016]. https://www.visualstudio.com/team-services/. 
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算 ， 为 广大 开发 人 员 推出 的 软件 全 生命 周期 管理 的 PaaS 服 务 ， 是 目前 跨 多 种 平台 进行 规 
划 、 构 建 和 交付 软件 的 最 快捷 的 方式 。 

基于 VSTS 服 务 ， 用 户 数 分 钟 内 就 能 在 微软 云 服务 架构 上 启动 VSTS 并 开始 工作 ， 无 须 
再 自己 安装 或 配置 单独 的 服务 器 。VSTS 的 操作 界面 与 TFS 非 常 相似 ， 它 将 新 的 功能 、 缺 
陷 和 其 他 工作 项 捕获 到 待 办 事项 中 ， 对 于 运用 Scrum、 看 板 或 自 有 灵活 流程 的 团队 而 言 ， 
创建 待 办 事项 非常 合适 。 另 外 ， 也 可 以 使 用 自 定义 的 任务 板 来 跟踪 团队 进度 ， 或 者 使 用 灵 
活 的 组 合 管理 让 更 大 的 小 组 跟踪 其 所 有 团队 的 工作 。 


用 户 数 不 超过 5 人 的 团队 可 以 免费 使 用 VSTS。 


VSTS 支 持 Git 客 户 端 和 Web 浏 览 器 界面 ， 如 图 16-33 所 示 。 无 论 开发 人 员 使 用 什么 操作 
系统 ， 哪 种 开发 工具 ， 如 Visual Studio、Visual Studio Code、Eclipse、IntelliJH 和 Android 
Studio 等 ，VSTS 都 可 以 完全 支持 。 





各 osx 国 ios A 


人 
s 
四 


Release 


用 (Q 全 本 多 
图 16-33 VSTS 支 持 的 开发 工具 

作为 一 个 完整 的 生命 周期 管理 服务 ，VSTS 不 仅 支 持 版 本 和 代码 管理 ， 也 支持 持续 集 
成 ， 包 括 测 试 、 部 署 和 发 布 等 全 部 功能 ， 但 有 些 团队 可 能 仍然 希望 继续 使 用 自己 已 经 熟 
悉 的 Jenkins 做 持续 集成 服务 。 本 节 后 续 将 演示 如 何 对 VSTS 和 Jenkins 进 行 集成 。 实 际 上 ， 
VSTS 底 层 使 用 的 是 TFS 解 决 方案 ， 对 于 已 经 用 过 TFS 的 开发 人 员 几 乎 可 以 直接 上 手 ， 没 有 
任何 学 习 难 度 。 

(1) 使 用 VSTS 前 ， 首 先 需要 有 一 个 微软 账号 ， 可 以 到 网 址 https://signup.live.com 处 
申请 。 

(2) 登录 网 址 https://visualstudio.com 即 可 创建 VSTS 服 务 ， 如 图 16-34 所 示 。 

(3) 创建 好 的 VSTS 账 户主 界面 如 图 16-35 所 示 ， 与 TFS 的 界面 很 接近 。 
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Host my projects at: 





webfrontendtesting -visualstudio.com 


Manage code using: 
OO Git 


FTeam Foundation Version Control 


We will host your projects in Central US region. 
Change details 


16-34 创建 VSTS 账 号 





Recent projects & teams Recent team rooms 


Ned Browse Browse to the Rooms hub to view team rooms you have 


MyfFirstProject 
a minute ago 





access to. 


图 16-35 VSTS 账 户主 界面 


(4) 图 16-36 为 具体 项 目的 管理 页 面 ， 提 供 了 代码 管理 、 持 续集 成 和 报表 等 功能 入 
口 ， 并 且 可 以 邀请 新 的 项 目 成 员 加 入 。 





Work assigned to Frontend Testing (0) Team Members 





Work asgned to you? Go 10 yourteam pxk ur nk 





i's lonely in here. 


I Menge worr 








de 


od cea 
Qs: 
pr 


人 pe Collaborate onco 








nuously integrate Bochog 





Sprint Bumdown New Work ltem va studio 
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图 16-36 ”项 目 管理 页 面 
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(5) 出 于 安全 考虑 ，VSTS 不 允许 Jenkins 通 过 微软 账号 和 密码 连接 VSTS， 解 决 方案 
是 创建 一 个 替代 账户 。 如 图 16-37 所 示 ， 在 账户 管理 界面 右上 角 ， 单 击 用 户 图 标 ， 选 择 My 
profile 选 项 。 然 后 选择 Security 一 Alterate authentication credentials 选 项 进入 相应 的 页 面 ， 选 
择 Enable alternate authentication credentials 选 项 ， 并 创建 scondary 用 户 和 密码 。 该 用 户 将 用 
来 连接 VSTS 和 Jenkins， 如 图 16-38 所 示 。 


Frontend Testing Ew 
frontendtesting@outlook.com 

My profile 

Alerts 


Security 


Usage 
Sign out 
图 16-37 ”选择 My profile 选 项 
DA webfrontendtesting ~ Home Users Rooms Load test 从 


Security “Usage 





Personal access tokens Alternate authentication credentials 
Alternate authentication credentials 

Wpersonal access tokens are a more convenient and se 
OAuth authonzations 
SSH public keys Alternate authentication credentials can be used to allow app 


Enable alternate authentication credentials 


User name (primary) frontendtesting@outlook.com 
User name (secondary) frontendtesting 

Password oo 

Confirm password oo 


图 16-38 选择 Alternate authentication credentials 选 项 


(6) 回 到 Jenkins 项 目 配置 页 面 。VSTS 的 集成 与 TFS 类 似 ， 也 是 通过 Team Foundation 
Server Plug-in 插 件 实现 的 。 需 要 注意 的 是 在 配置 Git 代 码 仓库 的 时 候 ， 输 入 的 不 是 微软 账 
号 ， 而 是 已 经 创建 的 secondary 用 户 的 账号 ， 如 图 16-39 和 图 16-40 所 示 。 

(7) 回 到 VSTS 的 Service Hooks 页 面 。 为 了 让 VSTS 的 Service Hooks 在 发 生变 更 时 能 
够 通知 到 Jenkins，VSTS 需 要 能 够 通过 公 网 JP 访问 Jenkins 服 务 器 。 在 本 示例 中 ， 作 者 把 
Jenkins 部 署 到 了 微软 公有 云 Azure 上 的 虚拟 机 ， 从 而 可 以 被 VSTS 访 问 到 。 
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TFS/Team Services 


Team Project Collections ol ol 
Collection URL https:/webfrontendtesting visualstudio com 


Credentials frontendtestingi | 二 


Depending on the integration features used, the user account or personal access token 
may need code read code_siatus andior work_write permissions 


Success via SOAP API Tat nm 
图 16-39 配置 VSTS Credentials 


Source Code Management 


None 


9 Git 


Repositories 
Repository URL ”https:/webfrontendtesting.visualstudio.com/_gitTestDemo 


Credentials frontendtesting/****** v Add 


Advanced… 


Add Repository 


图 16-40 配置 源 代 码 管理 


如 果 Jenkins 持 续集 成 服务 器 被 部 署 在 公司 内 网 ， 可 以 考虑 使 用 Nginx 或 者 


Application Request Routing (ARR) 工具 通过 反 向 代理 将 其 发 布 到 外 网 。 





(8) 在 Service Hooks 页 面 设置 用 户 时 ， 既 可 以 用 密码 也 可 以 用 API Token， 从 最 佳 实 
践 的 角度 作者 更 推荐 后 者 。 如 图 16-41 所 示 ，API Token 可 以 在 Jenkins 用 户 设置 中 ， 通 过 单 


击 Show API Token 按 钮 获得 。 
我 Jenkins 图。 admin llogout 


Jenkins admin 


会 People Full Name admin © 
\ Status Description 

Builds 

入 Configure ® 

年 MViews 


El Credentials API Token 


Show API Token... 


图 16-41 获得 API Token 
(9) 如 图 16-42 所 示 ， 在 Service Hooks 页 面 ， 设 置 Jenkins base URL、 用 户 名 、 密 码 、 
Build 项 目 名 称 ，Integration level 选 择 Built-in Jenkins API 选 项 。 





| 376 | Web 前 端 测试 与 集成 一 一 Jasmine/Selenium/Protractor/Jenkins 的 最 佳 实践 


NEW SERVICE HOOKS SUBSCRIPTION x 


Perform this action 
Trigger generic build v 
Triggers a generic Jenkins build, invoking the Jenkins build URL Secure, 


HTTPS endpoints are recommended due to the potential for private data in 
the event payload. Learn more 


SETTINGS 


Jenkins base URL © 
http//Testserver6990.cloudapp.net:8080 


Username © 
admin 


UserAPl token (or password) 


Build © 

UnitTestDemo Vw 
Integration level 

Built-in Jenkins API v 


Build token © 
Accepts parameters @ 
Ruild naramater 


Previous Test Finish Cancel 
3 
图 16-42 配置 Service Hooks 选 项 


其 余 关 于 单元 测试 和 自动 化 测试 的 集成 步骤 ， 与 上 一 节 TFS 一 致 ， 这 里 不 再 袭 述 。 


16.5 集成 GitHub 


GitHub 是 一 个 面向 开源 及 私有 软件 项 目的 托管 平台 ， 因 为 只 支持 Git 作为 唯一 的 版 本 
库 管理 格式 ， 故 名 GitHub。 

GitHub 于 2008 年 4 月 10 日 正式 上 线 ， 除 了 Git 代码 仓库 托管 以 及 Web 管理 界面 以 外 ， 
还 提供 了 订阅 、 讨 论 组、 文本 演 染 、 在 线 文件 编辑 器 、 协 作 图 谱 和 代码 片段 分 享 (Gist) 
等 功能 。 

GitHub 还 是 一 个 开源 协作 社区 ， 通 过 GitHub， 既 可 以 让 别人 参与 你 的 开源 项 目 ， 也 多 
许 你 参与 别人 的 开源 项 目 。 在 GitHub 出 现 以 前 ， 开 源 项 目 开 源 容易 ， 但 让 各 地 的 程序 员 参 
与 进来 却 比 较 困难 。 因 为 要 参与 ， 就 要 提交 代码 ， 而 给 每 个 想 提交 代码 的 开发 人 员 都 开 一 
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个 账号 并 不 方便 ， 也 没有 统一 的 实现 手段 。 所 以 ， 大 多 数 情况 下 ， 即 便 开 发 人 员 想 参与 ， 
也 主要 限于 提交 缺陷 报告 ， 即 使 能 修改 缺陷 ， 也 只 能 通过 邮件 发 送 代码 ， 对 大 型 项 目 很 不 
方便 。GitHub 通 过 强大 的 fork 和 pull request 功 能 ， 让 世界 各 地 的 开发 人 员 为 项 目 贡献 代码 
并 使 申请 代码 合并 变 得 非常 简单 ， 这 样 广大 开发 人 员 便 真正 可 以 自由 地 参与 到 各 种 开源 项 
目 中 ， 大 大 节省 了 沟通 和 协作 成 本 。 

通过 不 断 进行 项 目的 分 支 、 合 并 和 参与 ， 开 发 人 员 在 GitHub 中 的 活动 就 如 同 交友 一 
样 ， 社 会 关系 图 的 节点 在 不 断 地 连 线 与 发 展 ， 如 今 GitHub 已 经 成 为 全 球 最 大 的 社交 编程 
与 代码 托管 服务 商 。 在 作者 编写 本 书 的 时 候 (2016 年 12 月 ) ，GitHub 上 已 经 有 1900 万 开 
发 人 员 在 开发 、 共 享 代码 ， 项 目 数量 超过 了 5000 万 个 。 难 怪 GitHub 的 首席 执行 官 Chris 
Wanstrath 曾 经 形象 地 将 GitHub 称 为 “程序 员 的 维基 百科 全 书 ”。 

除了 开源 项 目 ，GitHub 也 支持 付费 的 私有 库 和 企业 版 本 〈(GitHub Enterprise) 。 其 中 
企业 版 本 的 GitHub 主 要 面向 大 型 公司 ， 可 以 将 其 私有 库 置 于 企业 防火 墙 之 后 。 

GitHub 使 用 非常 广泛 ， 因 此 接 下 来 本 书 将 介绍 把 GitHub 和 Jenkins 集 成 起 来 的 方法 。 
与 IFS 和 VSTS 类 似 ，GitHub 上 有 任何 新 的 代码 变更 都 可 以 通知 到 Jenkins，Jenkins 也 可 以 
周期 性 地 执行 构建 。GitHub 为 了 通知 到 Jenkins， 需 要 使 用 公 网 IP 访 问 Jenkins， 这 一 点 和 
VSTS 是 一 样 的 ， 当 然 也 可 以 采用 反 向 代理 服务 。 


16.5.1 配置 GitHub 


配置 GitHub 的 步骤 如 下 : 

(1) 在 GitHub 创 建 账号 并 登录 后 ， 单 击 账号 头像 ， 选 择 Settings 一 Developer 
Settings 一 Personal Access Tokens 选 项 。 然 后 如 图 16-43 所 示 ， 单 击 Generate new token 按 钮 
生成 访问 令 牌 (token) 。 该 令 牌 的 功能 与 OAuth 的 access token 类 似 ， 支 持 第 三 方 应 用 访问 
GitHub API 。 

Personal access tokens Generate new token 


Need an Apl token for scripts or testing? Generate a personal access token for quick access to the GitHub API. 


® Personal access tokens function like ordinary OAuth access tokens. They can be used instead of a password for Git 
over HTTPS, or can be used to authenticate to the APl over Basic Authentication 


图 16-43 ”创建 个 人 访问 令 牌 


© GitHub. GitHub Developer Guide[OL]. [2016]. https://developer.github.com/. 
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(2) 如 图 16-44 所 示 ， 填 写 Token description 页 面 并 选择 token 的 权限 范围 (scope) 。 
本 示例 需要 设置 以 下 3 种 权限 : 
@ Iepo: 用 来 访问 代码 库 。 
@ admin:repo_hook: 操作 hooks， 包 括 读 写 、 删 除 等 操作 。 
@ repo:status: 操作 变更 状态 。 
Token description 
tokenfortestdemo 
Whatsthistoken for? 


Select scopes 


Scopes define the access for personal tokens. Read more about OAuth scopes 


因 repo Full control of private repositories 
罗 repo:status Access commit status 
1 repo_deployment Access deployment status 
2 public_repo Access public repositories 

中 admin'org Full control of orgs and teams 
园 write:org Read and write org and team membership 
是 read:org Read org and team membership 

|! admin:public key Full control of user public keys 

里 write:public_key Write user public keys 
司 read:public key Read user public keys 

Madmin:repo_hook Full control of repository hooks 
write:repo_hook Write repository hooks 
4 read:repo_hook Read repository hooks 


图 16-4 选择 权限 范围 

(3) 单 击 Generate token 按 钮 ， 即 可 获得 创建 好 的 token 文 本 。 

(4) 创建 好 代码 库 后 ， 选 择 Settings 一 Webhooks 一 Add webhook 选 项 。 在 Payload URL 
输入 框 内 输入 Jenkins 的 监听 端口 http://[JenkinsAddress]:[JenkinsPort]/github-webhook/， 其 中 
JenkinsAddress 和 JenkinsPort 需 要 是 读者 实际 使 用 的 Jenkins 服 务 的 地 址 和 端口 号 。 单 击 Add 
webhook 按 钮 ， 创 建 webhook， 如 图 16-45 所 示 。 当 有 新 的 代码 变更 时 ，GitHub 可 以 通过 配 
置 好 的 webhook 通 知 Jenkins。Webhook 的 默认 事件 类 型 是 push， 关 于 其 他 事件 类 型 ， 读 者 
可 以 参考 网 址 https://developer.github.com/webhooks/ 中 的 资料 。 
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Options Webhooks / Add webhook 

Collaborators ‘We'll send a PosTrequestto the URL below with details ofany subscribed events. You can also specify which data 
format you'd like to receive JSON, x-www-form-urlencoded, etc). More information can be found in cur developer 

Webhooks documentation 


Integrations & services 


Payload URL* 


Deploy keys httpy//testserver6990.cloudappnet8080/github-webhook/ 
Content type 
application/son 和 
Secret 


Which events would you like to trigger this webhook? 
® Just the push event 
Send me everything 


Let me select ndividual events. 


国 Active 


We wildeliver event details when thshock is wiggered. 


| 
Add webhook 


图 16-45 创建 Webhook 


16.5.2 配置 Jenkins 


配置 Jenkins 的 步骤 如 下 : 

(1) 登录 Jenkins 并 安装 GitHub plugin， 该 插件 默认 在 初次 启动 Jenkins 的 时 候 被 
安装 。 

(2) 选择 Manage Jenkins 一 Configure System 一 GitHub 一 Add GitHub Server。 如 图 
16-46 所 示 ， 在 API URL 输 入 框 内 输入 https://api.github.com， 在 Credentials 选 项 中 提供 上 一 
节 创 建 的 个 人 访问 令 牌 。 单 击 Add 按 钮 ， 创 建 一 个 类 型 为 Secret text 的 凭据 ， 在 Secret 输 入 
框 内 输入 上 一 节 获 得 的 令 牌 文本 ， 如 图 16-47 所 示 。 


GitHub 


GitHub Servers 
GitHub Server 
APIURL httpsJlapi github com 


Credentials | tokenforestdemo "| 和 Add 


Credentials verified for user 


Test connection 
FrontEndTesting, rate imit 4997 


Manage hooks 加 


图 16-46 ”配置 GitHub Server 
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会 Jenkins Credentials Provider: Jenkins 


@= Add Credentials 


Domain Global credentials (unrestricted) 


Kmd Secret text 
Scope Global (Jenkins, nodes, items, all child items, etc) 
es 
ID 
Description tokenfortestdemo 
Add Cancel 


图 16-47 ”设置 令 牌 凭据 


16.5.3 ”配置 构建 任务 


配置 构建 任务 的 步骤 如 下 : 
(1) 在 Jenkins 中 创建 新 的 构建 任务 ， 如 图 16-48 所 示 。 色 选 GitHub project 复 选 框 并 将 
Project url 设 置 为 GitHub 中 创建 的 代码 库 地 址 。 


General | SourceCodeManagement BuidTriggers BuildEnvironment Build Post-buildActions 


Projectname GithubTestDemo 


Description This is a demo for Github integration 


[Plain text] Preview 





| Discard old builds 昌 
回 GitHub project 


Project url | https://github.com/FrontEndTesting/UnitTest/ © 


图 16-48 新建 构建 任务 


(2) 在 Source Code Management 页 面 内 ， 选 择 Git 单 选 按钮 ， 并 设置 GitHub 代 码 库 的 
git 访 问 地 址 ， 如 图 16-49 所 示 。 
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Source Code Management 


) None 
® Git 
Repositories 
Repository URL ”https lgithub com/FrontEndTesting/UnitTest git © 
Credentials frontendtesting@outlook com/™™™™ v oAde 
Advanced... 
Add Repository 
Branches to build EE 
Branch Specifier (blank for'any) master © 
Add Branch 


图 16-49 设置 Git 源 
完成 以 上 步骤 后 ，Jenkins 就 可 以 访问 GitHub 或 者 在 代码 变更 时 得 到 GitHub 的 通知 。 
GitHub 关 于 单元 测试 和 自动 化 测试 的 集成 步 又， 与 TFS 和 VSTS 一 致 ， 这 里 不 再 袭 述 。 
最 后 ， 请 读者 理解 持续 集成 是 一 个 不 断 演进 ， 持 续 深化 的 过 程 。 尽 管 在 实践 中 可 能 使 
用 到 不 同 的 CI 系统 ， 不 同 的 构建 脚本 ， 但 中 心思 想 都 是 通过 持续 构建 提升 软件 发 布 质量 。 
衷心 祝愿 读者 将 已 学 的 单元 测试 和 自动 化 测试 知识 融入 到 自己 的 集成 实践 之 中 ， 不 断 改 进 
测试 效率 ， 将 软件 质量 提升 到 新 高 度 。 


